Jump to content
GreenSock

Raistlin

vertical round carousel

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,
I would be thankful for helping deconstruct vertical carousel like in header on this page: https://flip.lease/
Needed features: autoplay and infinite.
Thanks,

Raistlin

Image 2018-01-03 at 11.40.22 PM.png

Link to comment
Share on other sites

Hi @Raistlin :)

 

That's a nice effect. Are you asking if that website uses GSAP or just how to make something like it in general? As far as I can tell, they're using CSS transitions. This would normally fall outside the scope of GSAP support, but coincidentally I'm in the middle of creating something quite similar for some interactive infographics so I'll show you what I'm doing. I'm using SVGs in my project, but you can do it with some plain old divs too.

 

The secret is setting the origin point for the divs so they go around the circle correctly. That website is using a pretty big parent circle (3000px) so they set the origin point of the divs to the center of that circle (1500px) and then rotate them. The fade at the top and bottom is accomplished with an additional div over the top of everything with a gradient background image that's transparent in the middle.

 

Here's a basic example of what you could do:

 

See the Pen YYxvgQ by PointC (@PointC) on CodePen

 

I'm manually setting the start rotation of each box with a set() tween, but if you had a lot of elements, you could get them to their starting positions with a loop too. To get the infinite part to work, I simply set() the rotation of each box back to the beginning as it drops down out of view. I just use a simple counter to pick which box is set back to the beginning and when the counter reaches 1, I reset it back to 6. Again, the fade-out at the top and bottom is created with a gradient div over the top of everything.

 

There would be other ways to approach this, but this is how I'd do it. Hopefully it gives you a starting point. Happy tweening and good luck with your project.

:)

 

  • Like 9
Link to comment
Share on other sites

  • 3 years later...
On 1/4/2018 at 9:19 AM, PointC said:

Hi @Raistlin :)

 

That's a nice effect. Are you asking if that website uses GSAP or just how to make something like it in general? As far as I can tell, they're using CSS transitions. This would normally fall outside the scope of GSAP support, but coincidentally I'm in the middle of creating something quite similar for some interactive infographics so I'll show you what I'm doing. I'm using SVGs in my project, but you can do it with some plain old divs too.

 

The secret is setting the origin point for the divs so they go around the circle correctly. That website is using a pretty big parent circle (3000px) so they set the origin point of the divs to the center of that circle (1500px) and then rotate them. The fade at the top and bottom is accomplished with an additional div over the top of everything with a gradient background image that's transparent in the middle.

 

Here's a basic example of what you could do:

 

 

I'm manually setting the start rotation of each box with a set() tween, but if you had a lot of elements, you could get them to their starting positions with a loop too. To get the infinite part to work, I simply set() the rotation of each box back to the beginning as it drops down out of view. I just use a simple counter to pick which box is set back to the beginning and when the counter reaches 1, I reset it back to 6. Again, the fade-out at the top and bottom is created with a gradient div over the top of everything.

 

There would be other ways to approach this, but this is how I'd do it. Hopefully it gives you a starting point. Happy tweening and good luck with your project.

:)

 

Hi PointC, how if we want to make it horizontal and start at top and the circle position is bottom?

Link to comment
Share on other sites

Hey @Difa Ananda. If you'd like debugging help, please create a new thread and provide a minimal demo of what you have related to the question that you're asking.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I need to create a half circle slider on clicking icon it should move to top and as on navigation to move next and previmage.png.2ca7ea9cc29d3666e59351a66e007769.png

Link to comment
Share on other sites

Hi there.  

If you'd like some help, please create a new thread and provide a minimal demo of what you have tried.

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