Jump to content
Search Community

Timeline and gsap.from Animation Working Infrequently or Inconsistently

InTheOne test
Moderator Tag

Recommended Posts

I'm having a weird issue where one timeline and one forEach tween are only working some of the time after browser/page refresh. Both are using a scrollTrigger. 


Here is the site: http://phpstack-452338-1436478.cloudwaysapps.com/

Here is the JS File: http://phpstack-452338-1436478.cloudwaysapps.com/js/annagreen.js


Issue #1 (happens about 80% of the time or every 8 out of 10 refreshes)

On my timeline monkeyPipe (line 116) the .to(cityTopBackground, {scale: topCityScale, transformOrigin:'bottom center'},.03) tween is their so my top of city buildings will scale to match my bottom city buildings. It works great 50% of the time. The topCityScale (line 101) variable gets the scale value that I need to match the lower city image width (depending on screen size). Sometimes this does not get set properly because the cityTopBackground scales down to 0 due to my topCityScale variable coming in a 0 and not getting the proper value like it can sometimes get. 


Issue #2 (happens about 50% of the time or every 5 out of 10 refreshes)

My fountCards.forEach (line 79) loop works as expected 50% of the time. The rest of the time the images don't slide in. I can see in the console that the div is getting triggered (lights up purple) but the values don't change. When it does work in the console it lights up purple and the values do change. 


I've tried a 4 or 5 of different JS methods to try to load the script after the page is fully loaded (I'm only assuming this is related to my issue) but none have worked. I'm currently trying the following:


function ready(callback){
    // in case the document is already rendered
    if (document.readyState!='loading') callback();
    // modern browsers
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    // IE <= 8
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
 //code is here


Any help would be greatly appreciated. Thank you! 

Link to comment
Share on other sites

Hey @InTheOne, I see you're using a from tween so some of this could be down to a regression in the latest version. Sorry about that!

Potential fixing options! 

  • Step back the version to 3.8
  • Use the latest beta 
  • Fix it for the current version by setting lazy: false on your .from() tween(s). 


It sounds like there's more going on here though so if you could make us a minimal demo we can take a proper look!


Thanks for being part of club GreenSock too! We appreciate the support 💚

  • Like 1
Link to comment
Share on other sites

Hi @Cassie


Thanks for your direction, putting lazy: false fixed the issue on the current version of GSAP for the images that would not consistently slide in. I also gave the Beta version a quick try and that fixes the issue even if you don't add lazy: false.


Getting that issue out of the way helped me figure out that why issue#1 was happening. Basically the image would not load fast enough to get the width of the div I needed and my variable would come back as 0 half the time. I tried some techniques to try to delay the call until after the image loaded but that did not work. Then I realized that I could do some (relatively) simple math to calculate what the image width would be even before it loaded and that fixed my second issue. -Thanks! 😎

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...