OSUblake

It's not seeing per se, it's that the properties you are animating with GSAP are conflicting with the CSS transition properties on those elements. Every time GSAP changes a value, the CSS transition is going to kick in and try to animate it too. It's creating two competing animations. I can't say how to fix it with as I don't mess with WP or any theme builders, but you need to figure out way to remove the CSS transitions from any elements you are animating with GSAP. That would probably be a better question to ask the theme builders.

They're all over your page if you inspect your elements. This is just from the first thing I right-clicked on...

Hi Sacha, We really can't troubleshoot a live site, and I'm not even sure where you are using ScrollTo on that site. Just based on your previous post, the only thing I can think of is that your height calculations might be incorrect. When the address bar moves in and out of view on mobile, it causes a resize as the browsers height has changed. For that, I usually make the address bar always visible like here.

Hi thunder, Your video doesn't seem to be valid and I don't see any problems with your demo, so I'm not sure what to suggest. For y-axis jumps, sometimes pinning can mess up because scrolling on a different thread than the JavaScript, so the only way to fix that is to use some sort of smooth scrolling.

Yep! All the methods available for the Timeline are on the left hand side in the docs. https://greensock.com/docs/v3/GSAP/Timeline Just be careful with from and fromTo animations as you may need to use the immediateRender property for animations that don't happen at the start of the Timeline.

Thanks for the demo! You're animating from it's current position to -25, so you need to switch that around, which you can do with a from or fromTo animation or by using gsap.set() to initially position them and then use a to animation. And to have them staggered, you can use the stagger property. A Pen by GreenSock (codepen.io)

Hi josch, Can you put that in a minimal demo? We can't look at a snippet of code and tell what's going on, especially with ScrollTrigger as it very dependent on your layout.

I doubt it because this shows the h1 is being animated. See the inline opacity and transform style. I also noticed that you are animating the trigger, which you shouldn't do as that will mess up ScrollTrigger's calculations. Try animating a wrapper element instead.

Your console.log statements show that GSAP is animating, but I have no idea why it's not visible. I would try another test animation, like say something else that doesn't use .from() or opacity for a sanity check.

That's exactly what I would have done. 😉

A Timeline will let you coordinate all of that with the position parameter. https://greensock.com/docs/v3/GSAP/Timeline

Hi ceescoenen, It's hard to say without a minimal demo, but if it's going to call the animation again, you should probably use .fromTo() animation. https://greensock.com/docs/v3/GSAP/gsap.fromTo()

Sure, you can have a timeline. You can do whatever you want in the callback, but I don't know how to advise because I'm not sure what you are trying to do. A minimal demo would go a long way in being able to give you a better answer. Thanks!

SVGs are supported, but you can't pin an element inside of an SVG because the there is no scrolling inside the SVG. Do you see a scrollbar inside your SVG? It's not a GSAP issue. It the nature of SVGs. You can pin the actual <svg> element and animate whatever you want inside the SVG, and even use elements inside the SVG as a trigger, but your demo is trying to treat the SVG like an HTML document that is scrolling.

Like I said, your JavaScript isn't valid. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals Minimal demo showing correct template string usage. Notice the `` instead of "" or ''. A Pen by GreenSock (codepen.io)