performance Performance of tweening many elements

[Alan Kell]

Hi,

I’m relatively new to GSAP and am loving the experience so far - great job all involved! I have a quick question about performance and best practice when making a few animations at the same time. I have one point in my web site process where I want to have a number of elements change state in sequence. I have added all of these to a timeline and it performs relatively well. When running it there is a slight performance hit, I’m guessing because I’m changing a good number of properties. When doing this, is it good practice to add all of the changes to a timeline, or run them as separate TweenMax.to statements?

 

I’ve included my statement here although the related html is large and would be tough to include in codepen. Can anybody spot anything blatantly wrong than I’m doing, or suggest any improvements on what I have shared to help speed smooth this sequence out?

 

For reference,

ctlTopCurve and ctlModel are SVG controls, imgHeader is an image and the rest of the controls are Div’s.

 

Thanks in advance for your help,

Al.

 

    var tl = new TimelineLite();

    $("#modelSwipeLayer").css('display', 'none');
    $("#ctlTopCurve").css('display', 'block');
    $("#ctlTopCurve").css('z-index', '1');
    $("#ctlHeader").css('height', '40%');
    $("#imgHeader").css('marginLeft', $(window).width());
    $("#imgHeader").attr("src", "/Content/Images/hero-image-3.jpg");
    $("#imgHeader").css('z-index', 0);
    $("#IndividualDashCompareDescriptionContainer").css('display', 'block');
    $("#IndividualDashMeasureDescriptionContainer").css('display', 'block');
    $("#imgHeader").css("opacity", 0);
    $("#imgHeader").css("marginLeft", 0);

    //Hide the existing controls
    tl.to("#ctlModelInstructionContainer", 1.5, { autoAlpha: 0 }, 0)
        .to("#btnShowIndividualDash", 1.5, { autoAlpha: 0 }, 0)
        .to("#ctlModelZoneContainer", 0.5, { autoAlpha: 0 }, 0)
        .to("#ctlModelNavGestureHintContainer", 0.5, { autoAlpha: 0 }, 0)

        //Move the model up
        .to("#ctlModel", 1.5, { top: '280', height: $(window).width() - 70 }, 0)
        .to("#modelGraphicContainer", 1.5, { strokeWidth: 2 }, 0)
        .to("#ctlModel", 1.5, { rotation: 45 }, 0)

        //Show the action buttons
        .to("#btnShare", 1, { y: '-=44px' }, 0)
        .to("#btnCompare", 1, { y: '-=89px' }, 0)
        .to("#btnMeasure", 1, { y: '-=89px' }, 0)

        //Show the dash text
        .to("#IndividualDashCompareDescriptionContainer", 0.6, {
            autoAlpha: 1,
            top: parseInt($("#IndividualDashCompareDescriptionContainer").css('top')) - 30,
            delay: 0
        }, 1.5)
        .to("#IndividualDashMeasureDescriptionContainer", 0.6, {
            autoAlpha: 1,
            top: parseInt($("#IndividualDashMeasureDescriptionContainer").css('top')) - 30,
            delay: 0.4
        }, 1.5)

        //Slide in the header image
        .to("#imgHeader", 3, { autoAlpha: 1 }, 1.5);

 

[Jonathan]

Hello @Alan Kell and Welcome to the GreenSock Forum!

 

Without a codepen we wont be able to see performance issues.

 

First i would say that you should change the CSS property top in your tweens to use y (translateY). Since animating a position offset like top (as well as left, bottom, or right) will cause your element to trigger layout which is bad for performance. Using CSS transforms will allow your element to be animated without causing a layout calculation on every render tick (frame), which means silky smoothness.

 

See CSS Triggers - top: https://csstriggers.com/top

 

Quote

Changing top alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations.
 

Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together.

 

But as far as setting CSS properties with jQuery css() method. You should use the GSAP set() method instead of using the jQuery css() method. So this way you are setting CSS properties via GSAP so it can keep track and record what CSS properties you change. Otherwise you are changing css properties outside of GSAP.

 

So you can change the jQuery css() method from this:

 

// change jQuery css() method 
$("#modelSwipeLayer").css('display', 'none');
$("#ctlTopCurve").css('display', 'block');
$("#ctlTopCurve").css('z-index', '1');
$("#ctlHeader").css('height', '40%');
$("#imgHeader").css('marginLeft', $(window).width());
$("#imgHeader").attr("src", "/Content/Images/hero-image-3.jpg");
$("#imgHeader").css('z-index', 0);
$("#IndividualDashCompareDescriptionContainer").css('display', 'block');
$("#IndividualDashMeasureDescriptionContainer").css('display', 'block');
$("#imgHeader").css("opacity", 0);
$("#imgHeader").css("marginLeft", 0);

 

To this using the GSAP set() method and using the GSAP AttrPlugin for setting your image src attribute:

 

// to the GSAP set() method and AttrPlugin
TweenLite.set('#modelSwipeLayer', {'display': 'none'});
TweenLite.set('#ctlTopCurve', {'display': 'block', 'z-index': '1'});
TweenLite.set('#ctlHeader', {'height': '40%'});
TweenLite.set('#imgHeader', {
  'marginLeft': $(window).width(), 
  'z-index': 0, 
  attr:{
    "src": '/Content/Images/hero-image-3.jpg'
  }
});
TweenLite.set('#IndividualDashCompareDescriptionContainer', {'display': 'block'});
TweenLite.set('#IndividualDashMeasureDescriptionContainer', {'display': 'block'});
TweenLite.set('#imgHeader', {"opacity": 0, "marginLeft": 0});

 

But its always better to create a reduced codepen example for use so we can test your code live:

 

 

Resources:

GSAP set() : https://greensock.com/docs/TweenLite/static.set()

GSAP AttrPlugin: https://greensock.com/docs/Plugins/AttrPlugin

 

Happy Tweening!

[Alan Kell]

Hi Jonathan,

 

Thanks for your reply, that all makes good sense ?

 

I’ll give what you’ve suggested a try and if I’m still struggling will strip out what I need to get it on CodePen.

 

Best regards,

Al.