https://github.com/imaaronjames/Simple-Android-Ripple

A Framer Studio module for adding Android Material Design Touch Ripples to any layer
https://github.com/imaaronjames/Simple-Android-Ripple

Last synced: 7 months ago
JSON representation

A Framer Studio module for adding Android Material Design Touch Ripples to any layer

• Host: GitHub
• URL: https://github.com/imaaronjames/Simple-Android-Ripple
• Owner: imaaronjames
• Created: 2015-11-24T22:02:20.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-05-24T15:43:02.000Z (over 9 years ago)
• Last Synced: 2024-11-14T03:34:17.399Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 2.26 MB
• Stars: 28
• Watchers: 4
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-framer - Simple Android Ripple - Framer module for adding touch ripple animations to any layer. (Modules)

README

          
# Simple-Android-Ripple

A Framer Studio module for adding touch ripple animations to any layer

## Installation

1. First, download the [Pointer Module](http://framerco.de/post/130291848269/module-pointer-helper-class-this-module-helps-you) by [Jordan Dobson](https://twitter.com/jordandobson). *This module is required.*

2. Download the androidRipple.coffee file.

2. Create a new Framer project and add both androidRipple.coffee and Pointer.coffee to your /modules folder.

3. Add `Android = require 'androidRipple'` at the top of your document.

[Sample Project can be found here](http://share.framerjs.com/aqzkcamx0iqw/)

More info about modules for Framer Studio: [FramerJS Docs - Modules](http://framerjs.com/docs/#modules)

![TextLayer](https://raw.githubusercontent.com/imaaronjames/Simple-Android-Ripple/master/androidRipple-Sample-Project.framer/images/sample-code.png)

## How to use this module

You only need one line of code to make Simple Android Ripples work. It looks a little something like this:

    `layerName.on(Events.Click, Android.Ripple)`

Replace layerName with the name of the layer you wish to add a touch ripple to when clicked.

### Simple yet powerful customization

This module can accept any Event to fire the ripple. Click is the most commonly used event, but you can also use any of [these here](http://framerjs.com/docs/#events.events).

___

That's it! the ripple layers will automatically animate in and out for you. When the layers animate out, they will be destroyed for you. Simple.