Jump to content
Search Community

Circular Carousel Help

daaanpace test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi GreenSock community.

 

Novice GSAP user here. Used it to create some custom animations for our agency site last year but not used since.

 

I need some help creating a slider that scrolls as if it's on a circular path very similar to this https://yolele.com/ - looks like the effect is created using css rotation attached on scroll in this example.

 

I found one or two topics that mention the MotionPathPlugin which I've never used used but wondered if that's overkill for something like in the example?

 

Any pointers in the right direction would be really appreciated.

 

Many thanks

Link to comment
Share on other sites

  • Solution

Hiya!

MotionPathPlugin is definitely not what you need, you're on the right track with rotations though! You'd need to be rotating the items depending on their position in the slider.

Here's a good place to start if you want to create scroll based animations https://greensock.com/docs/v3/Plugins/ScrollTrigger

I would recommend starting by creating a timeline that animates the items the way that you need and then attaching that to a ScrollTrigger.

Let us know how you get on!
 

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

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...