TimelineLite Version 17. vs 18+ (Bug?)

[themepunch]

Hi Guys,

 

we noticed some strange behaviour since version 18.0 of TimelineLite.    

 

On multiple reloads of the Page some of the timeline ignoring the Pause (created with addPause) and simple goes forwards on the timeline.  

 

The problem is not to reproduce with TimelineLite 17 but easy to reproduce with any version after 18.0+.

 

You need to reload the page multiple times (best way to reproduce to scroll during preload, however this is not a must): 

 

http://works.themepunch.com/revolution5/themeplicity/   to get the error.

 

I uploaded version TimelineLite 18.5 for now to show you the failure.  version 17 or older has no issue.  

 

Maybe this has something to do with the p._forcingPlayhead = p._hasPause = false functions or with some of the other pause changes i can see  in version 18 ?  (the most differences between the two version has to do with Pause functions) 

 

This is what we see if 18+ engine is loaded: http://screencast.com/t/K35ZlcceN

and this is what we see if 17- loaded : http://screencast.com/t/dlOoFMpAkYY

 

Hope you guys can find the issue and bring a fix for  that ?

 

Thanks a lot,

 

Krisztian

[Jonathan]

Hello themepunch (Krisztian)

 

I cant replicate what your seeing, There is a lot of code on that site! Can you please create a reduced codepen example so we can test and see this behavior in a live editable environment. It is best that you isolate the issue, since it will be really difficult to debug on a live site with all the other assets you have on the page.

 

 

Thanks!

[Carl]

Sorry to hear you are having trouble. 

 

I tried loading http://works.themepunch.com/revolution5/themeplicity/ about a dozen times on both Chrome and Safari while scrolling (and not). 

Like Jonathan, I couldn't once get the page to appear mostly blank as in your 18+ image or notice any elements not displaying. I really tried hard to break it.

 

I'm not familiar enough with the code to even guess at what might have changed in the versions but Jack might have an idea.

If you can do anything to produce a test that clearly replicates the problem it will be a huge help, especially if its something we can edit like a CodePen demo.

[themepunch]

Thank you for your feedback !

 

i am afraid this can not be rebuild on a CodePen that easily.  I made a Video for you to show what happens exactly: http://screencast.com/t/5Zt4PzKNF

 

First load fails, second load works.  This happens with version 18.0 and above very often (every few preloads).  Happens on Localhost or live environment. 

 

Browser: Google Chrome Version 53.0.2785.143 (64-bit).

OS: OSX 

Tested on 5 different Computers, over 3 different Networks. 

 

I am on this issue since days, and i isolated all other issues, and could make sure that the issue relays on the TimelineLite Version 18+.

Tested hundreds of times on TimelineLite 17 or earlier versions, and Problem never occurs.  

 

I debugged the timeline and i see that the progress of the timeline skips the Pause "frame" when it fails, and always process the pause frame it when it works. 

 

I put the timelines in an Array for Debug issues for you which you can reach like: 
..

jQuery('#rev_slider_179_2')[0].opt.timelines 

jQuery('#rev_slider_181_3')[0].opt.timelines 

jQuery('#rev_slider_182_4')[0].opt.timelines 

 

I.e. the Time Position of one layer:   jQuery('#rev_slider_181_3')[0].opt.timelines["rs-792"].layers["slide-792-layer-1"].timeline.time()  shows 0.32 when it loads well, and shows 0.63 when it is broken. 

 

When i compare the code between 17.0 and 18.0 (18.0 comes direct after 17.0) i see that most changes (almost all) has something to do with the pause function.  

 

I can understand that this Support issue is not that optimal for you, and having codepen example with a clear isolated environment is always the best basic for this, however i can give you any credentials, and can provide you any debug infos, creating visible timelines, etc. whatever you want.    As sad, this issue is just relaying on the changes happen in version 17->18 and i am sure i am not alone with this.

 

Hope you guys someway understand my situation and can help us further ?

 

Thank you very much for all your effort and support here ! 

 

Krisztian

[themepunch]

Hi Guys.

 

do you have any news for us ? Have you seen the Video i provided you last week?

 

Thank you,

 

ThemePunch

[Jonathan]

Hello ThemePunch,

 

Are you making sure that all your animation code doesn't run until the DOM is ready. As well as waiting until all images, js, and css is loaded via the window fully being loaded. The reason i ask is because this type of thing looks like a loading issue.

 

Using vanilla JS

// wait until DOM is readydocument.addEventListener("DOMContentLoaded", function(event) {     // wait until all images, css, js, and links are loaded     window.onload = function(){           // custom animation code goes here     });});

Or using jQuery

// wait until DOM is ready$(document).ready(){     // wait until all images, css, js, and links are loaded     $(window).on("load", function(){          // custom animation code goes here     });});

I could not replicate this on Windows 7 and on Windows 10. I tested in latest Chrome, Firefox, IE11, and MS Edge.

 

A limited codepen will be ideal. Since you have a lot of assets on that site and it will take time to try and debug your website. You should first try and isolate your animation and slowly comment parts. By isolating your GSAP code you can narrow down what might be happening. when i view your site in codepen i see a lot of layout thrashing going on in the Chrome Dev Tools timeline. As well as code running before the DOM is ready as well as before the window is fully loaded.

 

Also i see 3 JS files that are causing render blocking by being in the <head> tag and not in the footer before the ending </body> tag. That can also affect the users perception of the page loading blocking rendering until the DOM is and window are fully ready and loaded.

 

The following are causing render blocking since they are being loaded in the head tag. They should be moved before the ending body tag so they don't block page rendering:

http://works.themepunch.com/revolution5/wp-includes/js/jquery/jquery.jshttp://works.themepunch.com/revolution5/wp-includes/js/jquery/jquery-migrate.min.jshttp://works.themepunch.com/revolution5/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js

Also you are loading the jQuery migrate.min.js two times in the head tag

http://works.themepunch.com/revolution5/wp-includes/js/jquery/jquery-migrate.min.jshttp://works.themepunch.com/revolution5/wp-includes/js/jquery/jquery-migrate.min.js

That is why it is best to provide a limited codepen showing the issue. Since there are too many factors that could be affecting what your seeing with all the JS, CSS, and WordPress assets. It will take much more time to debug your full site, not to mention that we have to comb through all your code just to find where your GSAP code is. Any help you can to provide a limited codepen example can help us help you so we can focus on behavior we can replicate outside your WordPress website to assist you better.

 

Please standby and be patient while we look into this!

 

Thank You

[themepunch]

Hi,

 

thank you for your feedback. 

 

Our plugin Revolution Slider has hundreds of options and features creating full dynamic pages. This makes close to impossible to "comment out / simplify things" without loosing the current complexity which represents best this odd failure,

 

and  I was hoping   checking the changes in your code between version 16 & 17 would maybe point out a rare but existing bug in timelineLite.  

 

Im my opinion the loading of the mentioned libraries blocking the rendering of the dom above would have always or would have never side effect on the page in this case. As you can see loading the page with Engine 17(+) has almost always this bug, and loading the same page with an engine with version 16 or earlier has never issues.  

 

What i see:

- the frames with Pause are ignored and the timeline just runs forward when the issue happens,

- the frames with Pause are respected when the site rendered well.  

 

Perhaps this all related to a Browser Bug, Cache issue, Memory Addressing problem or similar. 

 

However I can understand your situation (we get ourself tons of strange support issues daily reported from our customers) and i think you can just go forward and close the issue here till i am not able to reproduce the Problem in a clean test environment on CodePen for better analyse.

 

Thank you again and have a great week ! And even more important, keep up the great work with GreenSock ! This really change the World of Internet ! 

 

ThemePunch