Jump to content
Search Community

On One Scroll Content And Image Should Change

Aruna Keshavaiah test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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! 

  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...