Cheslav

Thanks a lot, it worked!

Hello community! I can't figure out how to replay tween after main ScrollTrigger. In the Codepen I have an example, on the first scroll end there is a beam, but if you scroll up again and try to get the same animation (after ScrollTrigger ends), it doesn't replay. I've tried to clear animation inside onComplete like onComplete: () => { circleTl.time(0).kill() } But no luck. How to solve that? Thanks!

Thanks, mates! I'm getting closer to the desired result https://codepen.io/Anoshko/pen/MWmLGLQ How can I stop at the Item 6? Not so clear for now, don't judge please, it's a first project where I'm using GSAP. By the way, almost every animation is made using GSAP. When project's ready, I'll share results!

Almost, for now I have delayed fade and scale, what I need - apply animation on the middle item, so it looks like iOS timepicker (before iOS 13, I guess), with a zoomed active middle item. Now I have opacity and scale delay. Like your picker your picker, but with a scroll instead of drag and with finite items.

I mean, there is a main container with a class "wrapper" with a ScrollTrigger, and container with items with a class "items", it has fixed height. Previously, I've tried to set overflow-y: scroll, but now it works better, when overflow is hidden completely. So, I need to create one Timeline and ScrollTrigger inside with a scroller property, or use separate ScrollTrigger for each item?

I've tried something like animating each item individually, but got a problem with an inner scroll of a container with a fixed height. It scrolls first, then ScrollTrigger starts to animate. Also, only 3 items should be visible initially and others should appear on scroll, while previous fades out.

Hi! There is a video preview of a desired result in a post - https://drive.google.com/file/d/160O4G678xoksB7QUDTEGvN6EsstTsme-/view?usp=sharing

Hello community! I have a problem with a ScrollTrigger's tween position, if I understand correctly. My goal - scrollable carousel, like a wheel with a zoom in/out effect with a fade for a center item, but first item should be scaled at start and the last item should stay scaled at the end of scroll and window scroll continues. I've referenced Carl's tutorial, but something's wrong. Please help me to figure out this problem. Here is a video of a prototype - https://drive.google.com/file/d/160O4G678xoksB7QUDTEGvN6EsstTsme-/view?usp=sharing Also, Codepen link attached. UPD: For some reason, in a Codepen preview sections overlaps, please open in editor instead. I really appreciate your help! Thanks!