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

What is Framer? Join the Community
Return to index
Brendan Hastings
Posted May 21 - Read on Facebook

Hi,
I'm trying to animate a layer:

1) Along the y axis as well as fade it in at the same time.
2) After that I would like it to fade out, then reset its position.
3) I would like 1) and 2) to repeat 5 times.

I've done an example project here: http://share.framerjs.com/6qo5cxb6gh30/

As you can see I can fade it in and move it 5 times, it's just that final fade out that I can't really work out. I've messed about with AnimationEnd event, but can't seem to figure out the best way to chain animations with a specific repeat number.

Help would be greatly appreciated.

3 Comments

Josef Richter

I'd probably create layer states and then use for loop to switch states and then switch to the final one.

Benjamin Den Boer

Hey Brendan Hastings - ah, I see what you mean. Using "repeat" to achieve this is tricky. Here's one way you could also about this:

1. Store your animation & endAnimation in a function.
2. Create and store an interval that runs every x seconds
3. Clear the interval after a set amount of time / animations

See: http://share.framerjs.com/xlalcu6tzus1/
Hope this helps. :-)

Brendan Hastings

Ah! Thank you Benjamin Den Boer. I evidently haven't paid enough attention to the Utils stuff.

Read the entire post on Facebook