Trouble using ScrollSmoother in WordPress/Elementor

[IvanKunne]

Greetings, I'm trying to implement Scrollsmoother/w Scrolltrigger on images, for the parallax effect, on my wordpress site, wich is built using elementor. Currently I'm having little success getting this to work properly.  I'd very much appreciate some general advice to point me in the right direction on how to use ScrollSmoother correcly and efficiently in this type of environment!

[mvaneijgen]

Hi @IvanKunne welcome to the forum and thanks for being a club member. 

 

elementor is probably adding a bunch of CSS containing transition: all 0.3ms ease-in; which is fighting with GSAP. 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. (Also check if something is setting scroll-behavior: smooth; to your html and force it to be scroll-behavior: auto;)

 

I've never used elementor so I can't tell you where you can edit its settings to not load scrolling CSS or transition CSS, but you'll see that when you make a minimal demo with your current setup without all the CSS being loaded by Wordpress plugins ScrollSmoother and ScrollTrigger will just work.

 

Hoop dat het helpt en veel gelukt met je project! 

[IvanKunne]

Hello @mvaneijgen, thank you for your fast reply.

I tried implementing your feedback and put the elementor transitions to 0.0. I also found some other alike questions on this forum so I tried implementing some of the solutions given there as well. Sadly non of them seem to work for me.

 

Since it's in WordPress I can't deliver a minimal demo but I've made a Loom to show you the problem. (in attached file)

The heading and text animates but it is supposed to appear out of the container instead of being visible the whole time. The link to the page is https://d2bd.es/gsap-test/

If you have any solution or a way to steer me the right way I would very much appreciate it,  

[mvaneijgen]

Well a minimal demo isn't just so you can replicate your live setup, it is a way to get some code that you know is working in an environment where you don't have to worry about your live setup throwing errors. I also work in Wordpress, but all my animations start in Codepen where I can freely work to my hearths content, fork my work create different versions until I'm happy after that can I start implementing it in my site and do I have to worry about getting it perfectly working. 

 

To me your question sounds like you just want to put overflow: hidden; via CSS on the container that contains your text animation, which would be solved in seconds if you had created a minimal demo with he setup you're having, so don't underestimate the power of a minimal demo ✨ A demo speaks a 1000 words ✨