Search code examples
javascriptarraysrepeatgsap

GSAP repeatDelay Array?

So I'm currently spending a little bit of my free time learning and exploring GSAP (Greensock Animation Platform). And I'm wondering if it is possible to have an array of values for one specific repeating element. This is how my Tween looks;

TweenMax.from(blink, 0.2, {repeat: -1, scale: 0, ease: Power1.easeInOut, repeatDelay: 3});

now I'm wondering if it's possible to have the element "blink", have a 3 second pause, blink again and then have a 0.5 second pause before blinking again, and then repeat. I've looked at the documentation but can't seem to find anything relevant, is this something that I can do with GSAP or would I have to step out into JS?

Thanks!

Solution

  • Sure, you could just create 2 tweens in a timeline that are 3 seconds apart, and repeat the whole timeline and set its repeatDelay to 0.5. Is this the effect you wanted?: https://codepen.io/GreenSock/pen/a99e84eaba6f2e358801bbf02ffcf41d?editors=0010

    var tl = new TimelineMax({repeat:-1, repeatDelay:0.5});
tl.from("#blink", 0.2, {scale:0, ease:Power1.easeInOut})
  .to("#blink", 0.2, {scale:0, ease:Power1.easeInOut}, "+=3");

    There are forums dedicated to GSAP over at https://greensock.com/forums/ in case you'd like to get more help (we're usually very quick to respond over there).

    Happy tweening!