Jump to content
Search Community

Infinite carousel with autoplay

popland test
Moderator Tag

Recommended Posts

following this topic

i came up with a simplified version of it, it is correctly working at start, but the examples used button to swipe the images (or Draggable), instead i would like to call the "animate" function at intervals (without causing my javascript to infinite loop)

here is my sample, when loading the first image is moved correctly, but then everything stops

https://codesandbox.io/s/blissful-morning-w5kw2?file=/src/App.js

 

 

Link to comment
Share on other sites

Sorry, for my bad explanation, i was trying to saying that the code you showed me, even if it correctly loops between the function, do not animate the images

if you try this code (that is basically the one you provided with the addiction of a couple of console.log)  https://codesandbox.io/s/distracted-cray-m3sem?file=/src/App.js

the 3 images do not slide correctly, it only slide from the first to the second, then (even if the animate function is called) everything stops there 

Link to comment
Share on other sites

  • 1 year later...

Hi GSAP, I really appreciate the welcoming community here!

I have a question that is an extend of this topic.

The scenario is we have an infinite loop, but this time the image wrapper's width shrinks instead of sliding to the left.

I manage to do the width shrinking by stack those images in the same position like this.

html:

<div id="layer-4" class="image-wraps">
  <img class="images" src="...">
</div>
<div id="layer-3" class="image-wraps">
  <img class="images" src="...">
</div>
<div id="layer-2" class="image-wraps">
  <img class="images" src="...">
</div>
<div id="layer-1" class="image-wraps">
  <img class="images" src="...">
</div>

css:

.image-wraps{
  width: 100vw;
  position: absolute;
  left: 0;
  top: 0;
}

Then, I use gsap timeline to animate the them like:

const tl = gsap.timeline()
tl.to('#layer-1', {	width: 0, duration: 2, delay: 3, })
tl.to('#layer-2', {	width: 0, duration: 2, delay: 3, })
tl.to('#layer-3', {	width: 0, duration: 2, delay: 3, })
tl.to('#layer-4', {	width: 0, duration: 2, delay: 3, })

That being done, now I have no idea how to make it loop infinitely.

Please shine some lights!

Thanks in advance, and sorry I couldn't get a working sandbox.

Link to comment
Share on other sites

Hi there!

 

Maybe you need repeat:-1 on the timeline?
 

If you need more help, It would be incredibly helpful for us if you could create a minimal demo on codepen or codesandbox and start a new thread. This isn't really an extension of this topic. The codesandbox here uses React and the modifiers plugin and you're approaching the problem differently.

 

Thank you!

  • Like 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.
×
×
  • Create New...