Jump to content

Robert Wildling

Tween "including" pause

Go to solution Solved by PointC,

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

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!



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

Link to comment
Share on other sites

  • Solution

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.


  • Like 2
Link to comment
Share on other sites

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.