This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Aaron Paterson
Posted Jan 12 - Read on Facebook

Hey guys I'm talking some time out to work on modules ripple effect for an fab. it's kinda easy, but only if it works…

See the attached what I'm trying to accomplish.
Also my module folder has the 'rippleModule.coffee' file

http://share.framerjs.com/7va8i9430rpe/

I'm at a lose now.

# Import the ripple transition module
rippleModule = require "rippleModule"

# Define the animationOptions object
animOps = {
curve:"cubic-bezier(0.75, 0, 1, 1)"
time:0.3
}

# Create the 2 layers to switch between
fab1 = new Layer
x:0, y:0, width:100, height:100, borderRadius: "50%", backgroundColor:"black"
fab2 = new Layer
x:0, y:0, width:100, height:100, borderRadius: "50%", backgroundColor:"blue"

# Call module to create the ripple object
ripl = rippleModule.ripple fab1, fab2, fab1.midX, fab1.midY, animOps

# On button tap, toggle the ripple's states: fill, empty
fab1.on Events.TouchEnd, (event, layer) ->
ripl.states.next "fill", "empty"