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

What is Framer? Join the Community
Return to index
Brendan Fagan
Posted Sep 04 - Read on Facebook

Hi guys. Wondering what the best way is to loop a simple 'is typing' animation (see attached).

I want each circle to grow and shrink with a delay, so you get the wave effect. Obviously a pretty common pattern.

I can get the initial animation, but I'm struggling to find a way in getting the animation to cycle for a fixed time without copying/pasta large chunks of code and using a Utils.delay for each cycle. Ew.

Does anyone have a cleaner way to do this?

Thanks!

9 Comments

Stephen Crowley

Utils.interval(time, function)

Jeff Broderick

A simple way is to make it a GIF. :-X

Stephen Crowley

Sorry, I was en route while answering. You want to create a function that animates your layer/layers once and just use Utils.Interval(time, animateFunction) to execute that function over and over (time = # of seconds to execute) creating the loop.

Brendan Fagan

Great Stephen, makes sense. Thank you for saving me from GIF :)

Stephen Crowley

Ha! No problem! Just ping me if you get stuck or need further help.

Albin Ekblom

You should really use svg for this

ShekMan Tang

SoClean

Alexis Morin

You can allocate an animation to a variable and call it on Utils.interval(time, fn)

Syrus Akbary Nieto

CSS Animation should be enough (looped and played with animation delay), without touching a line of js

Read the entire post on Facebook