ScrollTrigger rotate on each slide

[vishnu10010]

there are five content horizontal sliders in the design, i want to achieve this, like each slide become active the round shape will rotate clock-wisely, after scroll up it'll rotate to normal state. Ive tried my level best, but couldn't figure it out. I'm a noob in gsap and js.

hope some one helps me.

See the Pen jOxmZPb by vishnusrt (@vishnusrt) on CodePen

[mvaneijgen]

Hi @vishnu10010 welcome to the forum!

 

When working with GSAP I always like to start with a timeline instead of single tweens. I've learned that an animation is never as simple as one tween and even if it is, I can always make my code simpler when it is done. But if you start out with only the option of one gsap.to() tween you're limiting your self. 

 

So what I've did is converting your ScrollTrigger tween to a timeline and add a second tween to this timeline that rotates the svg shape 360deg in the time that your slides move in. I've set it so that both tweens play at the same time using the position parameter ...}, "<"), this one means play with the previous tween, but there are a lot more! See the docs if you want to learn more.

 

See the Pen NWMjMwo?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[vishnu10010]

46 minutes ago, mvaneijgen said:

Hi @vishnu10010 welcome to the forum!

 

When working with GSAP I always like to start with a timeline instead of single tweens. I've learned that an animation is never as simple as one tween and even if it is, I can always make my code simpler when it is done. But if you start out with only the option of one gsap.to() tween you're limiting your self. 

 

So what I've did is converting your ScrollTrigger tween to a timeline and add a second tween to this timeline that rotates the svg shape 360deg in the time that your slides move in. I've set it so that both tweens play at the same time using the position parameter ...}, "<"), this one means play with the previous tween, but there are a lot more! See the docs if you want to learn more.

 

 

 

I really appreciate your effort and support. agin thank you so much!! ❤️ 

[vishnu10010]

@mvaneijgen how can i increase the speed of horizontal scroll? like one scroll entire one section would animate to next section?

[mvaneijgen]

This is done by increasing or decreasing the end: value of your ScrollTrigger . Yours is set to 

end: () => "+=" + document.querySelector(".data-whole").offsetWidth

As I read your question correctly you want to have it move faster? Then you could (document.querySelector(".data-whole").offsetWidth / 2) this will make it twice at fast.

[vishnu10010]

@mvaneijgen Hi,  , how can i manage to do 1 item per scroll? like if i scroll the date should align left of Risk management. also i need to active this with a single scroll, just like a carousel slide a single item with a arrow click.. it would be nice if you can guide me to do the same. eg:

See the Pen rNLOdbB by GreenSock (@GreenSock) on CodePen

 a similar scrolling experience, like an instant-snappy movement but horizontal.

[mvaneijgen]

You can add the snap property to your ScrollTrigger , this will add points on the whole timeline on which the ScrollTrigger  will scroll to if it is close. 

 

How ever your layout needs to be setup for that. E.g. the width of you .pdata elements all need to be the same width. Right now your .data-whole element has a with of 500%, which is just a random number and thus will not line up.

 

Here is an example of it working, but I couldn't get the width to play nicely, so you'll have to fix that for it to work as you want. 

 

See the Pen jOxwKGb?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[vishnu10010]

38 minutes ago, mvaneijgen said:

You can add the snap property to your ScrollTrigger , this will add points on the whole timeline on which the ScrollTrigger  will scroll to if it is close. 

 

How ever your layout needs to be setup for that. E.g. the width of you .pdata elements all need to be the same width. Right now your .data-whole element has a with of 500%, which is just a random number and thus will not line up.

 

Here is an example of it working, but I couldn't get the width to play nicely, so you'll have to fix that for it to work as you want. 

 

 

 

is there any way to show 1 item per scroll..? like only one item show per scroll.. now three items showing in the area. instead of horizontal scroll can we achieve this with a fade in and fadeout?

 

 

 

 

[mvaneijgen]

44 minutes ago, mvaneijgen said:

How ever your layout needs to be setup for that. E.g. the width of you .pdata elements all need to be the same width. Right now your .data-whole element has a with of 500%, which is just a random number and thus will not line up.

 

Yes you can, but you need to fix your layout so that the width of each item has the correct size. Read my comment.

[vishnu10010]

@mvaneijgen Hi, I got the width dynamically for .data-whole, also added a class active for each item and adding a active class, so i can show only that active class item ( with the help of css) even though it still lacks the perfection. its not snapping to the left of risk management div. i donno what to do. hope you help through it.

latest codepen: 

[mvaneijgen]

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

CSS is really important when working with GSAP. You have to think about how things are laid out and what they should do. I've stacked all your sentences on top of each other and then animated them from left to right. In your latest pen I see you use transition: all 1s . First of all if you care about performance, don't use all just animate the properties you want to animate, second if you want to work with GSAP you should never use transitions in your CSS, this will break all your animations (or you need to be 100% certain that you are transitioning something that is not animated by GSAP)

 

I highly recommend you do a few tutorials before jumping in and creating these complex animations. GSAP has a dedicated channel teaching you all about its tools and our @Carl has videos on topic that go beyond that. 

https://www.youtube.com/c/GreenSockLearning/videos

https://www.youtube.com/user/snorklTV/videos

 

See the Pen OJZjyWM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[vishnu10010]

3 hours ago, mvaneijgen said:

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

CSS is really important when working with GSAP. You have to think about how things are laid out and what they should do. I've stacked all your sentences on top of each other and then animated them from left to right. In your latest pen I see you use transition: all 1s . First of all if you care about performance, don't use all just animate the properties you want to animate, second if you want to work with GSAP you should never use transitions in your CSS, this will break all your animations (or you need to be 100% certain that you are transitioning something that is not animated by GSAP)

 

I highly recommend you do a few tutorials before jumping in and creating these complex animations. GSAP has a dedicated channel teaching you all about its tools and our @Carl has videos on topic that go beyond that. 

https://www.youtube.com/c/GreenSockLearning/videos

https://www.youtube.com/user/snorklTV/videos

 

 

 

@mvaneijgenHow can i make the first item active? like on scroll down or scroll up the first item should be opacity:1;

[mvaneijgen]

I'll leave that for you to figure out. As I said, do some tutorials and browser around this forum to see how others tried things.