On One Scroll Content And Image Should Change

[Aruna Keshavaiah]

Hi Team, 

We are trying to implement scroll tab functionality using GSAP & ScrollTrigger.

On scroll, the content description and image have to change. The problem is that the content and image need to display correctly. It's getting hidden; sometimes, we need to scroll twice to display the content and images.

Thank You
 

See the Pen ZEjPgjY by harishs11444 (@harishs11444) on CodePen

[mvaneijgen]

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. 

 

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. 

 

I've edit your pen by removing the transitions and the ScrollTrigger to see how the animation is doing. To me this looks fine, if you're also happy with the animation then it is time to add ScrollTrigger back in, but if not just tweak the animation without ScrollTrigger until you're happy. Hope it helps and happy tweening! 

 

See the Pen ExdgQVm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Aruna Keshavaiah]

Thanks a lot for the detailed explanation; we need that scroll trigger; on scroll, the content and image should change; we have achieved that, at a certain point, the content & image does not show.

[mvaneijgen]

38 minutes ago, Aruna Keshavaiah said:

we need that scroll trigger; on scroll, the content and image should change;

Yes, but ScrollTrigger is just animating something on scroll, so if you are not happy with how the animation looks, adding ScrollTrigger will not fix your animation. So what you have to do is first tweak your animation, before adding ScrollTrigger. This will be a much easier workflow.

 

I've tweaked your animation a bit. I don't know what you were doing with styling elements based on their inline styles. If you're animating with GSAP I would let GSAP handle all the animations, otherwise it will get complicated fast! If you want to handle the animations some other way (or want a different animation) that is also fine, but your animation need to be perfect before you enable ScrollTrigger 

 

See the Pen QWZGGGL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Be sure to check out this video it is a really good introduction how working with ScrollTrigger works. Hope it helps and happy tweening! 

[Aruna Keshavaiah]

I'm not looking for auto-animation; I need this when I scroll.

Using opacity =1, the description to the left and the image right I'm animating, 

what's happening is sometimes the opacity is not added properly

 

[Rodrigo]

Hi,

 

I suggest you to take the approach @mvaneijgen suggested to get the animation working as you expect first and then add ScrollTrigger back into the mix.

 

Get started with something like this:

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

 

Then add ScrollTrigger in order to control the animation with the scroll position. Also don't use CSS transitions with GSAP, that only creates more issues down the road, just use GSAP.

 

Hopefully this helps.

Happy Tweening!