ScrollTrigger Carousel (transform circles away from center expanding circles)

[Steve Giorgi]

Hey Guys,

 

This is a fork of a draggable carousel which I added ScrollTrigger to:

 

I set the center three circles to be scaled upwards, with the center most circle being the largest.  I'm trying to transform the outer circles so that they move away from the expanding circles and never overlap (and give the illusion that the expanding circles are pushing the smaller circles out of the way) much like the Netflix effect seen in their movie selection carousel.

 

Just looking for an approach that might work ---

 

I was thinking maybe I could use the sibling combinator to select the elements to the right of the center most circles and transform their x axis.  Maybe I need to target the center most circles with their index and transform them as they run through the current tween?

 

The circles really only need to keep a distance of ~30 pixels.  I think the entire approach may be wrong.  I think it may be best to keep the objects relatively positioned so they stay within the document flow and naturally push each other when I scale them upwards.  I'm not sure though; any thoughts?

 

See the Pen yLMGVvp?editors=1111 by steve-giorgi (@steve-giorgi) on CodePen

[GreenSock]

Potential quick fix: set your ease to "none" on all those scale tweens. I'm pretty sure it's just the nature of the easing that's causing the overlap. 

 

Short of that, I don't have time to build something for you but if I understand your goal correctly, it may not be as simple as "scale one thing up while others scale down" while expecting it to have no overlaps. If one element scales up, the others need to shift out of the way to make room. You could definitely animate the width/height so that the browser is forced to adjust the layout for you, but that's probably not the most performant way to do things (triggering layout is always best to avoid). But if you don't have too many things animating, it may to totally fine. 

 

It also depends which point you want to base things on. For example, will you prioritize the CENTER of the biggest element (thus things on both sides move outward)? Or the left side (thus everything shifts to the right) or the inverse? Or maybe it's wherever the pointer is. Just be careful because that can lead to overall drift. 

 

Hopefully something there helps

[Steve Giorgi]

@GreenSock thanks for the information!  I'll drop the easing and see what the result looks like.

 

I was really just looking for a way forward.  I was having trouble conceptualizing how I was going to even do what I wanted.  I just need to somehow determine which circle is growing so that I can group/select the circles that come before and after.  I can then shift them over by 50% of the growth of the center circle.

 

Ideally for my goal, as the center circle grows (I may drop it down to one circle, right now the center three and influenced), it would push the smaller circles outwards equally.

 

Thanks again!

[GreenSock]

I'd recommend nailing down the animation first (forget about hooking it up to ScrollTrigger). Once you nail that, then worry about the scroll stuff. 

 

Feel free to post back here if you've got any GSAP-specific questions. Good luck!