Jump to content
Search Community

Carousel with zoom in/out items with a fixed height | ScrollTrigger

Cheslav test
Moderator Tag

Recommended Posts

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 by Cheslav
Codepen preview overlap
Link to comment
Share on other sites

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

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 by Cheslav
Link to comment
Share on other sites

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...