Nick.Ls

Hi again, I've seen also the draggable demo on the helper function and same question applies there? How could I possibly add a class to the middle image once the drag ends animating? I am going to research a bit more through that demo but that's a lot of code to process. I'll come back with my findings if I come close to a solution on my situation. Thanks!

Hi Jack, Everything works as intended at this point except the feature of returning the viewable images and specifically the middle one. What I am actually trying to accomplish is a way to add a class in the middle image after I drag the carousel. I can't figure it out though doing through draggable. I have tried creating some kind of index calculation but with no luck under the helper functions. See the snap() function where I have commented my progress.

Hi everyone, I've been using GSAP for so long that I think I am having a weird brain freeze and I am unable to create an indexing where the middle image on the slider will take a, let's say, "selected" class. I have used a previous implementation I found in my codepen and I have commented the section where I started my effort of getting an index value for start. Under the snap function. Any help would be greatly appreciated!

@ZachSaucier It seems you were right, the easing plays a big role on how the svg draw progresses. Though I didn't find the optimal ease yet, I suppose it will work in the end. I am probably going to split the SVG on two parts so I can control it even more eficiently and also I have to find the CSS opts that will help in the responsiveness of my project. I will keep this post updated in case anyone needs the codepen or a similar solution. Thank you once more.

I think I get your point. Alirght, let's give it a try an I'll come back with the results... Thanks!

Thanks Zach, I will try the easings but are easings available whne using on scroll draw? Doesn't that depends on the scroll speed?

Hello, I am trying to draw an SVG path that spans through the entire website. At the moment the most suitable situation is having a single SVG than multiple ones cause of matter of responsiveness. The thing is that because of the particular design of the SVG, drawing it on scroll "hides the animation" at some points because of the difference of height and positioning etc, as you can see in my codepen. My questions is, can I have multiple triggers so I can slow down the drawing speed at different height lets say? Thanks!