Hi fellow GSAP lovers,
Currently i'm working on a slider which contains multiple slides. Each slide will extend to a full-width version by clicking on it.
When clicked the ScrollTrigger will be refreshed to calculate it's new start and end position, because of the new widths.
This works fine when you click on the first slide. It will "explode" to a full-width version and you can scroll to the next one.
The problem which I can't figure out is when I click on any other than the first slide, I can't scroll back to the first slide.
The second problem is when you have scrolled in the "exploded" view and than close the slide, it jumps to a position way below the slider.
Here is a link to the Codepen demo i've created:
https://codepen.io/Jordi-Nijland/pen/jOdXoBr
Right now there is a function that calculates the position of the slider and will update the transform property. (when clicking on a slide)
I'm not really sure if that's the way to go, but I've tried so many things. You guys are my last hope! 😄