Jump to content
GreenSock

tsimenis

Infinite Carousel with Draggable

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

Hi everyone, 

 

I'm trying to create an infinite carousel following this

See the Pen ZOgGXB by osublake (@osublake) on CodePen

by @OSUblake.

You can see in the codepen that it does work but I have this weird bug that the item that needs to go in the beginning of the list gets updated too late(?)

I've been banging my head to understand what's going wrong, I feel I'm missing something simple so I thought maybe someone has a suggestion.

 

thanks

See the Pen aQYMNj by tsimenis (@tsimenis) on CodePen

Link to comment
Share on other sites

Hi @tsimenis,

 

Since the cracks still dream of Thanksgiving ...

 

Here, my suggestion

 

// alternative list, if you want the "1" on the first left position

list: ["10", "1", "2", "3", "4", "5", "6", "7", "8", "9"]


// left: -itemWidth 

TweenLite.set(this.$refs.list, {
  left: -itemWidth 
})

 

See the Pen VVxwQo by mikeK (@mikeK) on CodePen


Best regards
Mikel

  • Like 5
Link to comment
Share on other sites

Hi @mikel,

 

I feel so silly, it makes sense to offset the list. 

 

So in my case that I want to have half list items visible I would do this: 
 

TweenLite.set(this.$refs.list, {
  left: -(itemWidth + itemWidth / 2)
})

 

Thanks a lot for your suggestion :)

 

  • Like 1
Link to comment
Share on other sites

Hi,

 

Besides @mikel's great solution for this you can see this sample I made of an endless marquee in React using the modifiers plugin. It shouldn't be too complicated to port this to Vue though and using Draggable to control the position of the elements:

 

See the Pen RVLBGJ?editors=0010 by rhernando (@rhernando) on CodePen

 

  • Like 5
Link to comment
Share on other sites

  • 1 year later...

Just get rid of the TypeScript preprocessor. People will ask you how to convert it to JavaScript, even though it doesn't use any TypeScript. :roll:

  • Like 2
  • Haha 1
Link to comment
Share on other sites

  • 5 months later...

@ZachSaucier I am new to GSAP. Can you please help me on how to add a Prev and Next button on the slide above. Also can this be moving to right automatically. Many thanks

Link to comment
Share on other sites

Hey @ryancalderon and welcome to the GreenSock forums. Unfortunately we don't have the capacity to create every request that people put in these forums but we're happy to answer any specific questions that you have. Feel free to post a new thread with what you've tried, where you're stuck, and how you'd like our help (including a minimal demo related to that issue) and we'll do our best to help with whatever specific questions that you have.

Link to comment
Share on other sites

  • 2 years later...
On 8/14/2020 at 1:01 AM, ZachSaucier said:

I converted Blake's pen to GSAP 3:

 

 


Hello!

 

This tween has been very good for me.
They asked me for a "slider", with continuous autoplay and loop, which you can drag.
Also, to stop when hovering over the slider and play when leaving.

Also, they asked me to go from right to left, so I added the possibility to reverse it with the "direction" variable.

I've created this codepen and I'm leaving it here in case anyone else needs something similar or just to get some new ideas. All the best!

 

See the Pen zYLjYQV by animaticss (@animaticss) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Really nice of you to pop back with this, thank you!

  • Thanks 1
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.
×