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

What is Framer? Join the Community
Return to index
Wouter Duijts
Posted Jul 25 - Read on Facebook

Hi guys! How can I start a radial color change on the position of the cursor? I know how to retrieve the cursor position with TouchMove but not how to turn that into a color animation. I'm having the cta on this page as an example: http://www.adidas.nl/climazone

Thanks for the help!

This what I got so far:
# create button background
bt = new Layer
y: 50
width: 200
height: 50
backgroundColor: "lightblue"

test = new TextLayer
text: "123"

blue = new Gradient
start: "#05F"
end: "0DF"

radialAnimation = new Animation bt,
gradient: blue

#Probably need to combine the next two
bt.on Events.TouchMove, (e) ->
cursorX = e.x
cursorY = e.y
test.text = cursorX + " " + cursorY

bt.onMouseOver ->
radialAnimation.start()

1 Comments

Davo Galavotti

Can you record the the animation? I'm not seeing the effect you are describing :/

Read the entire post on Facebook