Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
afulldevnull

Stagger blinking effect

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi!

 

First of all, thank you very much for making this excellent library.  I wish I would have found Greensock long ago, but better late than never.

 

I have a relatively simple problem, but I can't figure out an elegant way to animate it.  I have three circles, and I want the background color to change from green to red with stepped easing and hold for 1 second.  Then the next circle in line changes from red to green, and so forth. This is the effect I'm looking for:  imessage-sending-animated-gif.gif

 

I think that TimelineMax.staggerTo is what I'm looking for, but I can't quite get it to work as expected.  Can anyone give me any pointers?

 

Thanks for reading!

 

Ty

See the Pen JdbvRo by tysmith (@tysmith) on CodePen

Link to comment
Share on other sites

  • Solution

Hi afulldevnull  :)

 

pls try this :

TweenMax.staggerTo(circles,1,{opacity:0.3,ease:SteppedEase.config(1),repeat:-1,repeatDelay:0.5,delay:-1},0.5);

See the Pen MwbGvx by MAW (@MAW) on CodePen

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×