Jump to content

Matt DD

Trying to create a smooth scrolling carousel that also behaves like a marquee scroller

Moderator Tag

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

Okay so as you can see I have built one.
I originally used Slick and hacked it about to make it auto advance but it was super laggy and not very reliable.
Slick created a good basis (cloned slides etc) so I left that in but disabled the rest of the slider functionality
I've then created functions to move the slides with GSAP and re run the function on complete to auto advance the slides.
I've also added a pause on hover and next and previous arrows to navigate more quickly.
This all generally works but it is slightly laggy on safari (It's okay but if i add text to the slide it becomes hard to read, I've tried creating a CSS animation which is smoother but I can't get the extra features to work)
Also I'd need to do some tweaking to get the timing to work consistently with different width items as it's set to a fixed 3s per slide

Any help much appreciated, I feel like there may well be a much better way to do this with timelines or something similar

See the Pen pozVEoL by mscottDDTeam (@mscottDDTeam) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey Matt and welcome to the GreenSock forums! I'd recommend using GSAP for the entire thing. There's no need to duplicate content, you can just use GSAP's modifiers plugin to move it. There are some really good examples very similar to what you're trying to do in the thread below.



  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Thank you for your reply, and sorry for the late response i've been on holiday.
I ended up using this instead 

See the Pen vqbJPM by cmalven (@cmalven) on CodePen

Content in this situation does need to be duplicated, as if you just move it and the screen has a visible area of 3.5 items and you have 4 you see half of the last item jump from the last position to the beginning. Hope that makes sense.

  • Like 2
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.