Arc shape infinite slider

[DesignEbiz]

Hi Community, I'm stuck to  create slider like this (see attached screenshot), can you please help me..?
I tried but not working properly. I want to create slider with infinite scroll. 

[GSAP Helper]

What have you tried already? Can you show us in a minimal demo what you've tried, so we could see what you thought process is and thus better help you understand the tools. I would start simple, by just creating the animation frist, before making it a slider and infinitely looping.   

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[DesignEbiz]

See the Pen PoVYjrK by design-esparkbiz (@design-esparkbiz) on CodePen

I want Same as this below copen, but in arc shape that I Provided.

See the Pen QWxOBXx by screencore (@screencore) on CodePen

Thank you..! in Advance

[Rodrigo]

Hi,

 

This is a fork from a codepen by @Cassie

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

 

Here is the original one with Flip Plugin magic in it:

See the Pen abyZYym by cassie-codes (@cassie-codes) on CodePen

 

Hopefully this helps.

Happy Tweening!

[DesignEbiz]

Thank you.. for your response, I'll Try. 

[DesignEbiz]

Hi there,

https://htxrgj.csb.app/

(For better view please test on full screen)
I created a example that I want, but I face one minor issue while scrolling, 
I want to make it smooth while scrolling, currently it work with littel-bit of translateX issue by fix value.

I hope you Understand my concern.

Thanks in Advance..!

[Cassie]

Hi there - this is an incredibly complex solution. Did you look at the more simple route linked to above?

[Cassie]

Also the advice here is pretty pertinent

 

Quote

What have you tried already? Can you show us in a minimal demo what you've tried, so we could see what you thought process is and thus better help you understand the tools. I would start simple, by just creating the animation frist, before making it a slider and infinitely looping.   

Start small.

Start with a simple vanilla JS animation that does what you like. Focus on the styling and the movement - then you can layer in scroll interaction and React 

Asking people to help with 400 lines of unstyled broken React code is a little bit too much for these free forums I'm afraid.

[Cassie]

Alternatively - If you want to stick with this solution it would be very helpful to talk us through your solution. 

What are you doing, why and where exactly are you running into issues. Try to help us understand!

[DesignEbiz]

40 minutes ago, Cassie said:

Alternatively - If you want to stick with this solution it would be very helpful to talk us through your solution. 

What are you doing, why and where exactly are you running i0nto issues. Try to help us understand!

@Cassie Thank you for your response, I appreciate your help.
I will give a updated sorter lines of code soon.

[DesignEbiz]

Hi @Cassie I removed unused code from my codesandbox, please checkout below Link

https://htxrgj.csb.app/

I  want to animate in my animation using mouse scroll in arc shape that already given in my codesandbox.

The main issue is that everything working fine but, while from each last element is move to one step up, then a translateX is not working smooth. and I want it smooth.

I hope you got my point..!

Thanks in advance..!

[Rodrigo]

Hi,

 

A few things.

 

First, I think the the MotionPath Plugin is the best tool for this animation you're trying to do. Right now your setup is quite convoluted and the issues you're seeing mostly come from that. The MotionPath Plugin should simplify this quite a bit:

https://gsap.com/docs/v3/Plugins/MotionPathPlugin/

 

@Carl has a great lesson on how to use the plugin here:

 

Also this demo combined with the basics Carl goes through in the video should provide a solid idea of how to achieve that:

See the Pen zYyBKmG by snorkltv (@snorkltv) on CodePen

 

Also you are using React. When using GSAP in React/Next projects, always use GSAP Context. Proper animation cleanup is fundamental in React and GSAP Context is ideal for those cases:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Finally take a look at the resources in this page in order to learn how to correctly use GSAP in React projects:

https://gsap.com/resources/React

 

Hopefully this helps

Happy Tweening!

[Rodrigo]

Hi,

 

Check this codepen by @PointC as well:

 

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

 

Happy Tweening!

[DesignEbiz]

On 10/23/2023 at 9:30 PM, Rodrigo said:

Hi,

 

A few things.

 

First, I think the the MotionPath Plugin is the best tool for this animation you're trying to do. Right now your setup is quite convoluted and the issues you're seeing mostly come from that. The MotionPath Plugin should simplify this quite a bit:

https://gsap.com/docs/v3/Plugins/MotionPathPlugin/

 

@Carl has a great lesson on how to use the plugin here:

 

Also this demo combined with the basics Carl goes through in the video should provide a solid idea of how to achieve that:

 

 

 

Also you are using React. When using GSAP in React/Next projects, always use GSAP Context. Proper animation cleanup is fundamental in React and GSAP Context is ideal for those cases:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Finally take a look at the resources in this page in order to learn how to correctly use GSAP in React projects:

https://gsap.com/resources/React

 

Hopefully this helps

Happy Tweening!

okay @Rodrigo. I'll look into the given example and implement it in my project.

Thank you for your quick support and response.
I appreciate it.