Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Matt DD

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

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 post
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 post
Share on other sites

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 1
Link to post
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.

×