GSAP Scrolltriger Pinning being Jumpy

[Samalander]

There should be a smooth transition/pin, but the pinned element jumps around

Demo: https://hanc2.samalander.repl.co/

Code: https://replit.com/@Samalander/hanc2?embed=true#pages/index.jsx

[akapowl]

Hey there Samalander,

 

this in your globals.scss is the root of your problems
 

* {
  transition: 0.25s ease-in-out;
}

 

you are applying a transition of 0.25s for every property of every element on your page. 

 

When pinning, GSAP / ScrollTrigger has to apply a whole lot of inline-styles, so every time those change, there will be a 0.25s CSS transition for those properties of those elements. You've got to be very careful with CSS transitions on elements that are going to be changed by GSAP, so I'd recommend specifying transitions only when needed on elements and specific for properties that are needed - and most important: best don't set CSS transitions on properties of elements that are going to be changed by GSAP because they will interfere with what GSAP is doing.

 

[MAYA K]

Hey, How i can cancel the CSS transitions? I think it's somehow built-in with Elementor

[akapowl]

Hello Maya.

 

If you have access to a custom CSS file it might be enough to just set the transition on elements you don't want to have transitions applied to back to their default value, via using initial.

 

https://www.w3schools.com/cssref/css3_pr_transition.php

 

If that doesn't work for you, try specifically setting the transition-property to none and transition-duration and transition-delay to 0 or 0s.

 

If that still won't work, as a last resort (although not really recommended) you can do all of the above with !important added at the end.

 

And if you don't want to target every element individually, you can use the wildcard selector * instead.

 

 

If you don't have access to any custom CSS file, or none of the above works for you, you're likely better of asking the people who built Elementor about this.

 

This should at least give you some basic ideas, though.

 

See the Pen JjmrMNy by akapowl (@akapowl) on CodePen

 

[MAYA K]

yes! Thank you very much

 

[shahbazliaquat]

Thank you very much man, it's working @akapowl