While Scrub back to top, how to change respective DOM elements.

[Qamar Aziz]

I have added a Scrolltrigger Interaction where content switches based on the slide image active.

When I'm scrolling in the content switching is very easy as I'm running a function changeSlideContent(index) onStart.
When I scrub back to top, any idea how do I switch title, content, index, and dot with respect to their image active.

For each slide Image, there is a data attribute through which content is changing.

 

Any idea how to achieve this smoothly? I have attached the codepen link. I tried the whole day figuring out this, hoping the community will have my answers

See the Pen poBvrww by azizqamar7 (@azizqamar7) on CodePen

[mvaneijgen]

Hi @Qamar Aziz,

 

This seems like fairly complex way of going about it! If you just build a timeline with all the animations on it you'll get this for free! I don't have time to rewrite your whole setup, but here an example with just the images that get added to your sliderTl and if you scroll the animation will play and if you scroll backwards the timeline reverses, for free! You have to do nothing for this and it all just works. 

 

If you would create all your text elements on page load you could also do this for the text. 

 

Side note: 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. 

 

Check out this video it really demonstrates well how you should think about ScrollTrigger

 

 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

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

[Qamar Aziz]

Thank you so much for letting me know about the performance issue with CSS Transition and GSAP duration difference in animation.

So you are suggesting changing the title, content,  and index as I add to the same timeline and start from 0s? but this won't work as Images as stacked upon each other so they are hidden from behind. Any idea how do I make right image for right title, content, index even if I have to approach the same by stacking each other as they will be visible from behind. I just want the content to update correctly while scrubbing.

Any method will sound good

[mvaneijgen]

30 minutes ago, Qamar Aziz said:

but this won't work as Images as stacked upon each other so they are hidden from behind.

I'm not sure what you mean. In the example I've posted the images work, right? You get to see the first image, then the second, ect. 

 

31 minutes ago, Qamar Aziz said:

I just want the content to update correctly while scrubbing.

Same as the images, make the text be there already on page load and then just show them one by one.

 

For now I would remove ScrollTrigger all together and just focus on the animation. I've just written a guide how I see people making their code so complex, before they even have a working prototype! If I see myself doing this, I stop and just make the most simple example I can't think of and that is literally writing my animation out like this image1 to opacity: 0 , image2 from opacity: 1,  image2 to opacity: 0, ect. I can worry about optimising it later! Check out the post below I think it might help you understand how to make things simple before you make them complex again.