Jump to content
Search Community

Delay on animation start when updating timeline

aztekgold 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

I am pretty new to GSAP and have been trying to make a menu animation for my project.

 

I am triggering the timeline on click and updating the timeline on browser resize

 

When I click the button to show the menu after a resize there is a considerable delay

 

 

I'm sure it is just me not implementing the timeline correctly and wondered if anyone could offer some insight

 

Thanks

See the Pen jKGVYb by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks for the demo. It is very helpful.

The problem is that each time you call setSlides() you are adding a new set of tweens (via staggerFrom) to the end of the timeline, thus increasing the amount of animations in the timeline and the duration.

 

Open the demo below in a new browser window (edit on codepen), open the console and resize the window (horizontally) to see the console logs

See the Pen ERwNrQ?editors=0011 by GreenSock (@GreenSock) on CodePen

 

A solution here is to clear() the timeline BEFORE adding the new tweens.

 

 tl.progress(0).clear();
    tl.staggerFrom($('.screen-slides div'), .5, {x: '-100%' }, 0.1)

 

Resize the demo below horizontally and you will see that the duration does not change.

 

*note: If you resize vertically the duration will change because the vertical height determines how many divs you append which affects how many staggered animations are inserted.

 

See the Pen JZrbzZ?editors=0011 by GreenSock (@GreenSock) on CodePen

 

 

 

 

 

  • Like 5
Link to comment
Share on other sites

Amazing! Thank you so much 

 

that really help me to understand it.

 

If I had multiple items on the timeline how would I just update that part on the resize

 

e.g 

 

tl.staggerTo('.screen-slides div', .35, {}, 0.1)

   .from('.nav', .5, {x: -10px, opacity: 0,  }

   .... transition burger icon

 

how would I just update the stagger?

 

Thanks

 

Link to comment
Share on other sites

In that case I would recommend re-building your entire timeline.

It gets too complicated to remove a set of staggered tweens, create a new set, insert them into the timeline and then adjust when the other animations (like ".nav") should start.

 

I would create another function called "build new timeline" and call it whenever you need a new timeline. 

 

This is a comprehensive article (with videos) explaining how to use functions to build timelines and the many advantages: https://css-tricks.com/writing-smarter-animation-code/

  • Like 4
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...