detecting active centered slide in gsap carousel

[vzmsk]

hi there

I need to build a slider, where centered slide is active and larger than other slides.
I've been wondering if there is a way to detect active slide in gsap carousel (in my case it should be the one in the center)?

here is a picture of what I'm talking about:

See the Pen eYbRXNP by vzmsk1 (@vzmsk1) on CodePen

[mvaneijgen]

Hi @vzmsk welcome to the forum!

 

I would just keep track of the current index and then scale that time (or do what ever animation you want) to that current item. 

 

I've added your slides to a gsap.utils.wrap() and then feed the current index to that wrap, to always get the correct item even if the index grows or shrinks. Hope it helps and happy tweening! 

 

See the Pen JjwJzaY?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[vzmsk]

 

[vzmsk]

@mvaneijgen thank you so much for your answer! but now I struggle with gaps between the slides. because of scale() active slide overlaps previous and next slides, but if I use 'width' everything breaks. is there any workaround in gsap for it?

[GreenSock]

That definitely sounds like custom logic stuff (beyond the scope of free help we can provide here), but here are some comments: 

1. Browser graphics rendering will definitely perform better if you animate transforms instead of width/height/top/left. So if I were you, I'd animate x/y and scale only. And when you animate the highlighted scale bigger, you'd need to move all the elements to the left/right to make room for that growth. 
2. It might work best to just think of the entire thing like one timeline with sequenced animations (almost like it goes through the succession of the first one being selected, then the second one, then the third one, etc.) and just embed the animations accordingly into a single timeline. Pause that animation and then all you do is animate the playhead to do your highlighting based on the user's interaction. Like if they click to go to the 2nd element, perhaps that's at a time of 2.5 seconds on the timeline, so you animate the playhead there. You can literally animate the playhead like any other object, like gsap.to(timeline, { time: 2.5, duration: 1 })

Good luck! 

 

If you get stuck, feel free to post a minimal demo that clearly illustrates the issue with as little code as possible, and we can answer GSAP-specific questions. If you need custom logic help, you can contact us for paid options or post in the Jobs & Freelance forum. 👍