Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
TimeFrame

staggerTo is taking more time everytime i navigate to a new page in NextJs

Recommended Posts

Hello,

 

I am doing some animation on my nextjs application, using jquery.


You have the code in codepen.

 

The problem is that app is SPA (Single Page Application), and every time a move to a new route, the menu in the left shows great, but the text takes time to render. The first time app loads, it loads just like in codepen. Then when navigate to other page, i need to wait 1 second for text start animate. Then move to another page and it takes 2 seconds to start animating and showing text. While the background from the menu is showing great. The problem i guess is with that staggerTo method, since that is the one that does that.

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

Link to post
Share on other sites

The problem, from what I can see, is that openLeftMenu() is calling animationCanvas() each time, and animationCanvas() is appending the menu tweens to the timeline. Each time that happens, it will move further and further down the timeline.

 

I’m on mobile right now ... so I can’t get too involved with code ... but I will in a bit.

 

  • Like 2
Link to post
Share on other sites

I'm not sure what is causing your added delay. In your example you are using absolute time positioning so, it shouldn't be adding more versions of that same animation further down the timeline. Having said that, if you are using this in a SPA, there is no need to be recreating the animation every time the user click on the button. As cheap as it is to create the animation, you will be better off just toggling the play and reverse methods of an already created timeline.

 

Is this example of yours an exact copy of what is going on in your NextJS project? There might be something else at play here that is not captured in the CodePen.

  • Like 1
Link to post
Share on other sites

@TimeFrame

 

Even though the Tweens are being added to fixed positions, the timeline duration is getting greater each time openLeftMenu() is called ...

 

$('body').on('click', '.hamburger', function () {
  if ($(this).hasClass('is-active')) {
    hideLeftMenu();
  }
  else {
    openLeftMenu();
  }
});

 

 

with openLeftMenu() calling animationCanvas() which in turn appends a sequence of tweenNavigation.to(). Here are 10 "open" clicks on .hamburger

 

1431331341_ScreenShot2019-04-11at10_22_49AM.png.aa09b1ec078ad512b00e91fa6f06a670.png

 

See the Pen ZZKqzK by sgorneau (@sgorneau) on CodePen

 

 

And here is the output of a Pen where animationCanvas() is called once, and .hamburger clicks invoke tweenNavigation.play() and tweenNavigation.reverse().

 

439537850_ScreenShot2019-04-11at10_31_45AM.png.f4494354d055d72240a6ad346b03ee79.png

 

See the Pen rbmqrK by sgorneau (@sgorneau) on CodePen

 

 

Best to create the Timeline once and just use methods to control it.

  • Like 4
Link to post
Share on other sites
3 minutes ago, Shaun Gorneau said:

Even though the Tweens are being added to fixed positions, the timeline duration is getting greater each time openLeftMenu() is called

 

Very interesting. I wonder what's causing it.

  • Like 2
Link to post
Share on other sites

My guess, besides what Shaun and Pedro already have pointed here, is that this is related to the fact that your menu component could be re-rendered every time you do a route change and that re-render causes new instances being added to the timeline controlling the menu farther and farther away in the timeline, as Shaun points. Just create your animation in the componendDidMount() method and use what Shaun suggested. Also check your app and see if it's actually necessary to re-render your menu component everytime a route changes, normally menus are added at the top of the app tree, because they don't mutate as the app's data or state  is being updated.

 

@Shaun Gorneau and @Dipscom, the final tween in the timeline is not being added at an absolute time, the final number in that instance, stands for the stagger time between animations and not the position, that's why the stagger animation gets pushed every time.

 

Happy tweening!!

  • Like 4
Link to post
Share on other sites
1 minute ago, Rodrigo said:

the final tween in the timeline is not being added at an absolute time, the final number in that instance, stands for the stagger time between animations and not the position, that's why the stagger animation gets pushed every time.

 

Doh! I wasn't even paying attention to that!! ?‍♂️

  • Like 2
Link to post
Share on other sites
1 minute ago, Rodrigo said:

@Shaun Gorneau and @Dipscom, the final tween in the timeline is not being added at an absolute time, the final number in that instance, stands for the stagger time between animations and not the position, that's why the stagger animation gets pushed every time.

 

DING! DING! DING!

 

Ladies and Gentlemen!

 

We have a winner! Well done mr. @Rodrigo, you have seen what both of us has missed.

 

A real team effort. Allow me to take in some credit where none is deserved.

  • Like 2
  • Haha 1
Link to post
Share on other sites

@Dipscom and @Shaun Gorneau, your input was invaluable in this one. Because of that I just payed attention to that final tween and nothing more. So indeed is a true team effort!!

  • Like 2
Link to post
Share on other sites
5 minutes ago, Dipscom said:

A real team effort. Allow me to take in some credit where none is deserved.

 

I mean, that is step 6!! ?

 

step_6_54.jpg.00e7964a4c069a264f67002cfd202415.jpg

  • Haha 5
Link to post
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.

×