Tween "including" pause

[Robert Wildling]

In CSS, it is possible to use various percentage values in the @keyframes object to imitate a "pause included" effect.

The pen shows a breathing effect that has a pause at the end. It can be read like:

1s: breath in

2s: breath out

3s-4s: don't breath

then repeat again.

 

In order to imitate that effect in GSAP, I play around with yoyo and repeatDelay, but unfortunately the repeatDelay is called after each and every tween, whereas it would be desireable to  place it after and only after the yoyo repetition. (Question: would that make sense to implement a "after yoyo" flag in the repeatDelay attr, like: repeatDelay: [2s, true]?)

 

How would you do that at Greensock?

Any help would be most welcome - thanks!

Robert

 

See the Pen rraEqL by rowild (@rowild) on CodePen

[PointC]

Hi Robert Wildling 

 

Welcome to the GreenSock forums.

 

I'd recommend using a timeline with a repeat of 1 on the tween and then an infinite repeat and delay on the timeline like this:

var b = document.getElementById('testGSAP');
var tl = new TimelineMax({repeat:-1, repeatDelay:2});
tl.to(b, 1, {opacity: 1, scale: 1.5, ease: Linear.easeNone, repeat: 1, yoyo: true});

See the Pen GjgVQR by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

[Robert Wildling]

Thank you so much, PointC! You helped me a lot!!!