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

What is Framer? Join the Community
Return to index
Chris Wang
Posted Jan 29 - Read on Facebook

One thing that I wish I could do in Framer is to modulate animation progress, similar to the Driver in Principle or Progress in Transition patch in Origami.

Here's one use case, if I have a layer, and I want to animate it smoothly from stateA and stateB based on force touch, right now you can't really use states to achieve that.

The beauty of states is that it's like drawing two keyframes in animation and then the computer will fill in the inbetweens.
https://youtu.be/TZJLtujW6FY?t=3m7s like the one demoed in Paperman, or even Ed Catmull's Tween decades ago. In framer when I need to animate layers based on continuous events like dragging or scrolling, I'll have to write the math for each property I'm animating.

I wish I could just do things like

layer.states.add
start:
opacity:0
scale:0
end:
opacity:1
scale:1
animationProgress = Utils.modulate(forceTouch, [0,1], [0,1])
...
layer.states.switch("end", animationProgress)

and it will smoothly animating between the two states based on force touch.

4 Comments

Krijn Rijshouwer

Hmm... Niels van Hoorn

Marc Krenn

Couldn't figure out how to highjack states but I came up with this:

Niels van Hoorn

Interesting! Currently it's tricky to support this with states, because they're pretty tightly coupled with animations, and animations are driven by the an animation loop, but it might be possible with some refactoring.

The slider trick that Marc showed is nice, but won't work with states, unfortunately.

Jonas Treub

Here is an example of how to extend layers with a modulate function. Just like the Utils modulate function it expects a fraction for the first parameter. The second and third parameters are the state names you want to mix. http://share.framerjs.com/rtx0sjah18qi/

Read the entire post on Facebook