Jump to content
Search Community

Timeline overlap/duration weirdness

unvs test
Moderator Tag

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

Hello, and first of all, thank you so much for this wonderful library!


I'm trying to wrap my head around this weird thing I'm seeing in my app, and I feel like my head is about to explode!


When I reveal multiple elements with `overlap`, and I delay the call of each tween, the animations get chopped.

So if I have 8 boxes split over 2 rows in my app, the first 4 reveal perfectly, but if I scroll slowly the next ones get chopped off.

It seems as if the timeline is not active, and I shouldn't use negative overlap, but `isActive()` returns true, and if it didn't, the animations would not overlap.


I've tried to reduce it to an easier testcase in the codepen above.


When the DELAY_BETWEEN_CALLS is greater than the diff between DURATION and OVERLAP the start of the animations get chopped off.


Am I doing it wrong?


As I'm understanding it, if I have:


- a Tween with a duration of 2

- a delay of 1.5 seconds

- a Tween with a duration of 2, with overlap -=1


it should work?


Any help at all is much appreciated :)




See the Pen qBWyJvq by unvs (@unvs) on CodePen

Link to comment
Share on other sites

If I remove the delayedCall() and wait for the first 9 boxes to load, then scroll down so 10, 11, 12 are starting to tween, then scroll down to the next rows while 10, 11, 12 are still fading in, the rest of the tweens break.


So, is it when I'm adding tweens with a position overlap to an already running timeline?


See the Pen OJLwdGE by unvs (@unvs) on CodePen

Link to comment
Share on other sites

For anyone wondering or finding this later, I solved it by checking the position of the recent() tween if the timeline.isActive()



    const startingPoint = tweenDuration - tweenOverlap
    if (section.timeline.isActive() && section.timeline.recent()) {
      if (section.timeline.recent().time() > startingPoint) {
        // We're late for this tween if it was supposed to be sequential.
        // Insert at current time
        position = () => section.timeline.time()
      } else {
        // Still time, add as normal overlap at the end
        position = () => `-=${overlap}`
    } else {
      position = () => '+=0'
  • Like 1
Link to comment
Share on other sites

33 minutes ago, mikel said:

Hey @unvs,


Welcome to the GreenSock Forum.


I'm not sure what effect you want to achieve.
You forked a good pen of Eric that he has successfully created here in this post.
So what should be different?


Best regards


It should work :D


The pen I forked does not under certain circumstances, as when you scroll slowly and parts have been revealed with very short intervals and longer delays between tweens, which results in ugly bugs when scrolling erratically through sections with different number of tweens.


If Tween1 has a duration of `2.0`

then there is a delay of `1.5` and Tween2 is called with a position of `-=1.9`

then there is a delay of `1.5` and Tween3 is called with a position of `-=1.9`, the tweens break.


My fix works though, so I'm happy - thanks for looking at it anyway :)

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.
  • Create New...