GSAP ScrollTrigger Circular Image Slider

[tatanka]

Hello, i found some slider using Gsap but i want to modify it with timelines. My goal is when i start scrolling my slide scroll and set rotation to 0


I tried to combine it with timeline but it jumps or anims end when i didnt scroll yet. Without timeline all of them rotates at the same time.

See the Pen dywYReO by Orhan-Celik (@Orhan-Celik) on CodePen.

[tatanka]

I made some improvements but cant achieve to rotate one by one. my latest codepen below: 

See the Pen dywYReO by Orhan-Celik (@Orhan-Celik) on CodePen.

[Rodrigo]

Hi,

 

You could try ScrollTrigger's container animation:

https://greensock.com/3-8/#containerAnimation

 

Here is a demo:

See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[tatanka]

Thank you so much @Rodrigo I will try this one hope this will do my job  

[tatanka]

3 hours ago, Rodrigo said:

Hi,

 

You could try ScrollTrigger's container animation:

 

 

Here is a demo:

 

 

 

Hopefully this helps.

Happy Tweening!

It worked like a charm thank you again!  

See the Pen dywYReO?editors=1010 by Orhan-Celik (@Orhan-Celik) on CodePen.

 

[Rodrigo]

You're welcome!!

 

Looks really nice, great job!

 

Happy Tweening!

[Mr choy]

hi all master,

can this "Circular Image Slider"  rotation be like the sample below?

See the Pen eYbezYG by Mrchoy (@Mrchoy) on CodePen.

 

[GSAP Helper]

Hi there!

I'm not really sure what you're asking. Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

[Nicolai Palmkvist]

To the next person reading this: Here’s a YouTube tutorial on how to create a Circular Image Slider in Elementor for WordPress. Enjoy!