GSAP animations on first initial run not working as expected (lagging)

[Galanthus88]

Hi,

 

I have issue on iOS and desktop where on first initial run my animation would not run as expected. Lagging and instantly skipping the animation.

 

Can someone help?

 

tl.from(

'.hero__figure',

{

opacity: 0,

y: 50,

ease: 'Power2.easeInOut'

},

'-=0.75'

).to('.hero__figure', {

y: -60,

rotate: '0'

});

[ZachSaucier]

Hey Galanthus88 and welcome to the GreenSock forums. 

 

There's a couple of improvements you could make related to your code and one bigger issue:

• ease: 'Power2.easeInOut' is invalid. You either need to use the condensed string form for eases (recommended) which would be ease: 'power2.inOut' or use the old object form of ease: Power2.easeInOut.
• You don't need quotation marks around numerical values in tweens.
• The bigger issue is the duration paired with your position parameter. Your first tween has a duration presumably of 0.5 seconds since that's the default value and no duration is set. Yet you set its position parameter of '-=-.75' which would start it 0.75 seconds before the timeline's start. Thus the whole first tween and half of the second tween is already "completed" when the timeline starts. I'm guessing if you remove that it will fix your issue. You should learn more about the position parameter and how it works here: 

[Galanthus88]

Thank you very much for the help and welcome. I am new to GSAP and really like it. 

 

This solved my issue!