Cheslav Posted August 11, 2021 Share Posted August 11, 2021 (edited) 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! See the Pen gOWqRdZ?editors=0110 by Anoshko (@Anoshko) on CodePen Edited August 11, 2021 by Cheslav Codepen preview overlap Link to comment Share on other sites More sharing options...
OSUblake Posted August 11, 2021 Share Posted August 11, 2021 Hi Cheslav! Can you explain the problem because I'm not sure I completely understand? Shouldn't you just give each item a different starting scale, going from small to large, and then animate to the end scale. Link to comment Share on other sites More sharing options...
Cheslav Posted August 11, 2021 Author Share Posted August 11, 2021 23 minutes ago, OSUblake said: Hi Cheslav! Can you explain the problem because I'm not sure I completely understand? Shouldn't you just give each item a different starting scale, going from small to large, and then animate to the end scale. Hi! There is a video preview of a desired result in a post - https://drive.google.com/file/d/160O4G678xoksB7QUDTEGvN6EsstTsme-/view?usp=sharing Link to comment Share on other sites More sharing options...
OSUblake Posted August 11, 2021 Share Posted August 11, 2021 I saw the video, but it doesn't seem linear, like what Carl did. You might need to make a unique animation for each item to get the effect you want. Link to comment Share on other sites More sharing options...
Cheslav Posted August 11, 2021 Author Share Posted August 11, 2021 (edited) 3 minutes ago, OSUblake said: I saw the video, but it doesn't seem linear, like with Carl did. You might need to make a unique animation for each item to get the effect you want. 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. Edited August 11, 2021 by Cheslav Link to comment Share on other sites More sharing options...
OSUblake Posted August 11, 2021 Share Posted August 11, 2021 2 minutes ago, Cheslav said: 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. What do you mean? I don't see any other scroll containers in your demo, but if you need the change the element that is scrolling, you can use the scroller property. Quote scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. Link to comment Share on other sites More sharing options...
Cheslav Posted August 11, 2021 Author Share Posted August 11, 2021 7 minutes ago, OSUblake said: What do you mean? I don't see any other scroll containers in your demo, but if you need the change the element that is scrolling, you can use the scroller property. 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? Link to comment Share on other sites More sharing options...
OSUblake Posted August 11, 2021 Share Posted August 11, 2021 13 minutes ago, Cheslav said: So, I need to create one Timeline and ScrollTrigger inside with a scroller property If you want to scroll it independently of the main scroll. But I still don't think I understand what you're trying to do here. I get that you have fixed height pinned container, and I get that you want to animate the items. So are you just trying to change when items start animating while the container is pinned? Link to comment Share on other sites More sharing options...
Cheslav Posted August 11, 2021 Author Share Posted August 11, 2021 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 See the Pen YrXdGZ by osublake (@osublake) on CodePen , but with a scroll instead of drag and with finite items. Link to comment Share on other sites More sharing options...
OSUblake Posted August 11, 2021 Share Posted August 11, 2021 Oh, there are some more examples of that here. I think you might have to do something like this so it doesn't loop. ScrollTrigger.create({ trigger: containerRef.cuurent, ... onUpdate({ progress }) { animation.progress(progress); } }) Link to comment Share on other sites More sharing options...
OSUblake Posted August 11, 2021 Share Posted August 11, 2021 Just a quick edit of one of those pens. See the Pen yLbZvWr by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
GreenSock Posted August 11, 2021 Share Posted August 11, 2021 8 minutes ago, OSUblake said: I think you might have to do something like this so it doesn't loop. ScrollTrigger.create({ trigger: containerRef.cuurent, ... onUpdate({ progress }) { animation.progress(progress); } }) Why not just eliminate the repeat (why do you have it there to begin with?) and do this: ScrollTrigger.create({ trigger: containerRef.current, ... animation: animation, scrub: true }) Because when you associate an animation and set scrub: true, it's basically like doing animation.progress(self.progress) in an onUpdate. Link to comment Share on other sites More sharing options...
OSUblake Posted August 11, 2021 Share Posted August 11, 2021 23 minutes ago, GreenSock said: (why do you have it there to begin with?) Legacy code. 😉 It was needed in the original draggable demo using v1. Link to comment Share on other sites More sharing options...
Cheslav Posted August 11, 2021 Author Share Posted August 11, 2021 Thanks, mates! I'm getting closer to the desired result See the Pen MWmLGLQ by Anoshko (@Anoshko) on CodePen 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! Link to comment Share on other sites More sharing options...
OSUblake Posted August 11, 2021 Share Posted August 11, 2021 You'd have to find the right values to put in here. The numbers are the start and end time of mainTl to play. .add(mainTl.tweenFromTo(1.3, 2)) 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now