Jump to content


Help with resetting animations correctly in a single page app

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 was wondering whether someone might be able to help me?..


I am writing a single page kiosk application which has a full screen menu. i rather liked the example here: https://greensock.com/stagger an have been using it as starting point but I have come across a head scratching issue...

I have attached a code pen example  with the basic idea of way i am showing and hiding the pages from a main menu based on the Greensock example.

I am not sure i am making a major error with the way i am going about this?  The pen is working correctly, my app is even working correctly in my development environment but when i compile it and run it on a different machine there are some strange things happening but only with this animation!

I am using electron and webpack, everything works fine on my dev machine and even the compiled version works perfectly on that. But, when i compile it and run it on a different machine, weird things start to happen but only with this animation...obviously the first thing to think is there must be something wrong with electron or webpack but, I have investigated the way wepack is compiling it and that seems ok, i am not packaging the files into an asar at this stage.. i have peppered the code with console logs to try and establish what is going wrong but there are no errors at all in the console and everything seems to be reporting as expected.  it's just this animation does some very random things... I have tried it on 4 other machines and they all share this weirdness with this animation. 


The problems are that the animations do not seem to reset themselves correctly after the first time it is run.. the sizes are incorrect sometimes and occasionally some of the buttons opacity is incorrect. Looking at the inspector on a machine it is not working on in a compiled version, the transformation matrices do not seem to reset to where the should.  I don't know why on earth it should be any different between machines but i may be doing something fundamentally wrong with the approach i am taking here as this is my first adventure with greensock so i am probably messing up badly!


I know it's a tricky one to help with as the pen works.. but, i guess the main questions are:

1) am i using the timeline correctly by creating a new one each time the function is called or is this likely to cause a problem? i.e


  function menuEntrance(callback) {
    var timeline = new TimelineMax();
    timeline.set(".btn", { visibility: "visible", y: 0, opacity: 1 })
      .staggerFrom(".btn", 2, { scale: 0.5, opacity: 0, delay: 0.5, ease: Elastic.easeOut, force3D: true }, 0.2)
      .eventCallback("onComplete", function () {
      if (callback) { callback() }


2) is this the best way to do this?

3) has anyone else experienced any issues like this?  are there any reasons why the timeline may stop without completing - the callbacks are fired?



So i have tried several different versions of GS and using a CDN in the HTML rather than webpack, stripped the app back to the bare bones and still getting the issues, i have also tried it without a timeline using TweenMax 

See the Pen BqyPJv by alifixit (@alifixit) on CodePen


That doesn't help in the app.. the only thing i can think of as to why it is different and why it works in the pen and dev machines and not the others is that the specs of machines are slightly different?  the app is working with base64 images as css backgrounds would this have anything to do with it.  I think also i need to reset the css afterwards, i have played with clearProps and resetting various different things but i'm not sure how to do it correctly so it doesn't jump around and ruin the effect?


Ok, so i tried changing to <IMG> tags, no improvement... adding scale : 1 to the menuEntrance TweenMax.set means they all appear the same size now, which is great but often some do not appear...


Any help or suggestion are very much appreciated!!!!! 


Many Thanks!

See the Pen YJPQEe by alifixit (@alifixit) on CodePen

Edited by alifixit
additional info..
Link to comment
Share on other sites

It's hard to say what the problem is without seeing it. First, make sure you don't have CSS animations that are animating the same properties as GSAP.


Same goes for jQuery. Your're using fadeIn/Out. I would only use GSAP. 


I noticed a setTimeout, which can cause timing problems when working with animations. Use TweenLite.delayedCall() instead. 



It can also be canceled.



But the thing that sticks out the most is that you are using from animations in one of your callbacks. Rapidly click the button in the demo below to see how that can result in unexpected behavior.  It's very easy to break your demo doing the same.


See the Pen ZqYmNp by osublake (@osublake) on CodePen


Another thing to be aware of when using from animations is immediateRender.




  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thank you so much for your reply!!


This has given me plenty to work with and think about, i really had hit a dead end with this one as frustratingly it was working perfectly on the dev machine and i was unaware of a problem. It was only when deploying to other machines it i found an issue. i had never really experienced this with electron as its usually pretty consistent between devices as it has the browser packaged, but at least it enlightened me to the errors in my code.


I am sure you have cracked it and that my problem lies within the from animation callback as your demo pen is doing very similar things to what i am experiencing.


The setTimeout()  was really just to simulate the loading time of the app as there is a splash screen and isn't used for any animation timings. Hopefully that isn't causing problems in this instance. However, i am using it in another animation for a side menu popup that auto closes so this information is extremely useful and i will rewrite that also!


I'll use GASP for fade transitions and remove Jquery.


i will work on this again this evening and will follow up with my results 


Thanks again! I have just joined the club!! :)


  • Like 3
Link to comment
Share on other sites


Just to follow up with this..


Its now all working reliably, thanks for your help!


This was mainly achieved by changing the exit animations from a staggerFrom() to a staggerTo().


I also replaced the jquery fadeIn and Out i was using with a xfade function using GASP.


For completeness, here's pen with the kind of things i did:


See the Pen NOqZvL by alifixit (@alifixit) on CodePen



Many thanks!!  :)

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