Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

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.

×