Leaderboard

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