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

What is Framer? Join the Community
Return to index
Jaanus Kase
Posted Jan 05 - Read on Facebook

Hey guys. What better use of Christmas holidays than playing around with Framer FlowComponent. I ran into a few things I can’t quite figure out.

Essentially what I am doing, is setting up two artboards side by side in Design view, and then doing a FlowComponent custom transition between them in Code view. A few questions around that.

1) (how) can I control the custom transition animation timing and curve?

2) how do I set up onTransitionStart handler? On the transition object, or FlowComponent instance? I can’t seem to get it to fire, and I couldn’t find any examples.

3) the reason why I need to hook into onTransitionStart is that since the frames/artboards are next to each other in Design view, the x and y coordinates are 0:0 only for the first one. So in order to make them appear on top of each other, I thought I’d hook into onTransitionStart to reset the coordinates of affected frames in code while keeping them nicely separate in design view, but maybe there is a better pattern/best practice for resetting these positions for transitions?

6 Comments

Jonas Treub

Hi Jaanus. You can listen for events like onTransitionStart and onTransitionEnd. Here is an example: https://framer.cloud/CophR

Jonas Treub

You can find more information on custom transitions in the docs: https://framer.com/docs/#flow.transition

Jaanus Kase

Thank you! Listening to the events works now. Do you have any idea about how to control transition timing and curve?

Jaanus Kase

The only way I have found so far to change the animation options and timing for custom transitions is to change Framer.Defaults.Animation. Which might work for my current small prototype, but wondering if there is a more local/targeted way.

Joseph Brick

Hi. On question 1:

Jaanus Kase

Joseph Brick yay, thank you, that works.

Read the entire post on Facebook