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

What is Framer? Join the Community
Return to index
Marc Krenn
Posted Dec 03 - Read on Facebook

Claudio recently asked how to animate a gradient based on scrolling.

The included "colorFunctions" module is 100% stolen code from motif's very own Edwin Van Rijkom - sorry! - , which will hopefully be pulled into Framer.js soon.

updated framer project: https://tr.im/scrollGradientArray
original framer project: https://tr.im/scrollGradient
html5/gif: http://gfycat.com/RegalDisgustingKillerwhale

#gradients #backgroundColor #fade #color

12 Comments

Andrew Nalband

awesome

Claudio Guglieri Lillo

Nice! Thanks again!

Marc Krenn

Here's an updated/simplified version:
https://tr.im/scrollGradientArray

Just punch in your gradient values into the array and you're good to go :)

Peter Marencik

briliant

Julio Caunedo

Looks great

Casey Baker

Quick question, is there anyway to animate two properties of the same layer over two different curves? Like scale and position animating over two different curves?

Marc Krenn

Yes, that's easily doable but I fail to see how your question is related to my post :)

anyway:

layer.animate
_____properties:
__________scale: 2
_____curve:"spring(300,30,0)"

layer.animate
_____properties:
__________midX: 50
_____curve:"spring(100,10,0)"

Casey Baker

Thanks Marc!

Marc Krenn

So to answer your question in a more general way: You can animate any number of layer properties separately, yet simultaneously. :)

Koen Bok

If you attempt to animate the same property on the same layer, I go with the last one.

Benjamin Den Boer

This is super cool.

Marc Krenn

Final version using the new, regular 'Utils.modulate' to modulate between those gradients:

http://share.framerjs.com/upoktxv4ufyz/
(requires latest beta)

Read the entire post on Facebook