Jump to content
Search Community

sluggish in chrome

davej 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

Hi All

I have a pretty basic animation.  a couple of png some scale up and some rotate.  They are on the larger size.  The animation works great in every browser but chrome.  It is supper sluggish to the point its unusable.  http://clients.rubberduckyinteractive.com/cmp/animationtest.html.  Any help or suggestions would be great.  Is there a better way to achieve this set of animation effects with out using such large png.  It does need to be responsive.


Thanks for any help in advance

Link to comment
Share on other sites

If you crack open Chrome's Dev Tools and do a timeline recording, you'll see that you have MASSIVE repaint times. Like...insane. And that has nothing to do with GSAP which is pure JavaScript (notice JS execution is quite fast by comparison to the pain times). I didn't have time to completely debug, but I'd bet that if you added force3D:true on your tweens, you'll see a big speed boost, as the browser will force that animated element onto its own compositor layer (think of it like getting GPU acceleration). Also, make sure you're using images at their native size whenever possible (although it's fine to scale them using GSAP - I'm just saying in the raw HTML/CSS markup) because Chrome is notorious for taking an incredible amount of time to resize images and apply subpixel rendering algorithms. 

  • Like 1
Link to comment
Share on other sites

Hello davej, and Welcome to the GreenSock forum!


It looks like your codepen link is output a lot of errors in the console. All your JS, CSS, and image files are relative to the document.


If you open your browser console you will see the errors and NOT FOUND errors.


But just from looking at your code it looks like you are using ScrollMagic which uses GSAP.


UPDATE: Jack beat me to it :)

Link to comment
Share on other sites

ok I have stripped this down to the basics.  Just straight html with only greensock being called for animation,  Still super sluggish,  I added the force3D:true per Jacks advice wit a little improvement but not much.  What am I doing wrong



<!DOCTYPE html>
<html class="no-js" lang="en">
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=500" />


	<script type="text/javascript" src="js/_dependent/greensock/TweenMax.min.js"></script>

	 <div class="col-lg-12">






                    <div id="ring1"> <img src="images/rings1.png" class="img-responsive"></div>
                 <div id="ring2">    <img src="images/rings2.png"  class="img-responsive"></div>
                 <div id="ring3">   <img src="images/rings3.png"  class="img-responsive"></div>
                <div id="star1">    <img src="images/star1.png"  class="img-responsive"></div>
                <div id="star2">   <img src="images/star2.png"  class="img-responsive"></div>
                 <div id="star3">   <img src="images/star3.png" class="img-responsive"></div>
                <div id="sr1">    <img src="images/sr1.png"  class="img-responsive" ></div>
                <div id="sr2">    <img src="images/sr2.png"  class="img-responsive" ></div>
                 <div id="sr3">   <img src="images/sr3.png"  class="img-responsive" ></div>

                <div id="sr2"> <img src="images/sr4.png" class="img-responsive">
                <div id="sr5">      <img src="images/sr5.png"  class="img-responsive" ></div>


                // build tween
            var sr1 = document.getElementById("sr1"); 
            var sr2 = document.getElementById("sr2"); 
            var sr3 = document.getElementById("sr3"); 
            var sr4 = document.getElementById("sr4"); 
            var sr5 = document.getElementById("sr5"); 

            var ring1 = document.getElementById("ring1"); 
            var ring2 = document.getElementById("ring2"); 
            var ring3 = document.getElementById("ring3"); 
            var star1 = document.getElementById("star1");
            var star2 = document.getElementById("star2"); 
            var star3 = document.getElementById("star3"); 

            tween = TweenMax.to(ring1, 15, {force3D:true, css:{rotation:359}, ease:Power3.easeOut,repeat:-1});
            tween = TweenMax.to(ring2, 25, {force3D:true, css:{rotation:-359}, ease:Power3.easeOut,repeat:-1});
            tween = TweenMax.to(ring3, 5, {force3D:true, css:{rotation:360}, ease:Power3.easeIn,repeat:-1});


            tween = TweenMax.fromTo(star1,3,{force3D:true, visible:true,scale:0},{scale:1,ease:Back.easeOut});
            tween = TweenMax.fromTo(star2,8,{force3D:true, visible:true,scale:0},{scale:1,ease:Back.easeOut});
            tween = TweenMax.fromTo(star3,2,{force3D:true, visible:true,scale:0},{scale:1,ease:Back.easeIn});

            var repeats = 20,
            tl = new TimelineMax({repeat:repeats,force3D:true }),
            tl1ProgressUnit = 1 / repeats;
            tl.totalProgress(8 * tl1ProgressUnit);
            tl.from(sr1, 1, {css:{autoAlpha:0}})           
            .from(sr2, 1, {css:{autoAlpha:0}})           
            .from(sr3, 1, {css:{autoAlpha:0}})          
            .from(sr4, 1, {css:{autoAlpha:0}})
            .from(sr5, 1, {css:{autoAlpha:0}});




Link to comment
Share on other sites

Hello again, davej..


When i looked at your code in the script tag on your webpage.. i noticed you added force3D:true.. but since you are using the css object ( css:{} )  you need to place force3D:true inside the css:{} object since force3D is part of the CSSPlugin .. if you weren't using the CSS object than you could just place that property in any order and GSAP would know to use force3D.

// with CSS object - css:{} 
tween = TweenMax.to(ring1, 15, {css:{rotation:359, force3D:true}, ease:Power3.easeOut, repeat:-1});

// without CSS object
tween = TweenMax.to(ring1, 15, {rotation:359, force3D:true, ease:Power3.easeOut, repeat:-1});

Also if you setup a codepen demo example it will be much better to test live code to better help you!


Here is a nice video tut by GreenSock on How to create a code pen demo example.


Hope that helps :)

Link to comment
Share on other sites

you da man, that did the trick.  I have spent two days trying to dissect this thing stripping out stuff etc.  When doing a fromTo do I need to add it to both?

TweenMax.fromTo(star1,3,{force3D:true, visible:true,scale:0},{force3D:true, scale:1,ease:Back.easeOut}); 
Link to comment
Share on other sites

no worries, glad you got it working!


davej, you said .. " When doing a fromTo do I need to add it to both? "


that is a great question! .. I usually just add it to only one of the fromTo vars, but im also curious about that too ...


the Mighty Jack or Carl can give a proper answer to that question :)

Link to comment
Share on other sites

ok now I have ran into another problem that appears to be caused by force3D.   I am getting elements flickering as tweens execute 


http://greensock.com/forums/topic/9378-elements-sometimes-disappear-mid-transition-in-chrome.   cording to this post removing it would fix and it does but then I am back at square one with really sluggish animation


I know you mentioned I had massive repaint times but I have not been able to find any way of controlling that,  I googled the heck out of it too.




Link to comment
Share on other sites

Can you be very specific about exactly what is flickering, how we can reproduce the problem, etc.? If you want the fastest, most accurate answer, please provide a reduced test case in a codepen. Unfortunately, we just can't provide free general performance consulting for everyone here. We try to stay focused on specific questions about GSAP. If you'd like to hire us to analyze your particular project and do a performance audit, feel free to contact us

Link to comment
Share on other sites

sorry, the pink cloud in the background flickers when the first sets of tweens finishes then it also flickers when scrolling(but does not do it when tween codes are removed).  This happens in chrome only.

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