Elementor & GSAP and ScrollTrigger

[stojanovicmarko]

Hi, 

Does anyone know why the pinned section jumped in Elementor?  Please see the video.

 

I use this sample code. 

 

Greetings,
Marko

See the Pen zYmpmGN by GreenSock (@GreenSock) on CodePen

[akapowl]

 

Hello there, Marko, welcome to the GSAP forum.

 

Does the codepen show the same issue for you - because for me it doesn't.

 

I'm not familiar with Elementor at all, but your video very much looks like there are conflicting CSS transitions applied to the element that is being changed inline by ScrollTrigger; so when ScrollTrigger changes e.g. the position to/from fixed on the pinned element, it will transition when the inline styles get applied.

 

I'd suggest digging through your CSS and looking for transitions that are being applied by Elementor - and if they might affect any element that is being targeted by GSAP / ScrollTrigger in any way, remove them / overwrite them so they don't have an effect on that element any more.

 

I hope that will help resolve the issue for you.

 

[Rodrigo]

Hi,

 

Another user reported issues with some styles generated by Wordpress. Although I'm not sure that elementor is the responsible for this, it might be a good idea to check it:

 

Hopefully this helps.

Happy Tweening!

[stojanovicmarko]

Hi, 

 

When I add transition: none!important; to the section, jumping doesn't occur. Strange but it works
 

Thanks, everyone for the answers.

 

Greetings,
Marko
 

[mvaneijgen]

1 hour ago, stojanovicmarko said:

When I add transition: none!important; to the section, jumping doesn't occur. Strange but it works

 

Not at all that isn't strange! These kind of tools (page builder) like to just add CSS willy-nilly to any object and transition: all; is one of the CSS tropes that should not be added to any object and certainly not to elements you want to animate with GSAP! Read the following: 

 

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete.