popland Posted February 7, 2021 Share Posted February 7, 2021 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 More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 Hey popland. There were a few errors in your code. Here's a version that more or less does what you need: https://codesandbox.io/s/ecstatic-aryabhata-9wedo?file=/src/App.js Let me know if you have any questions. Link to comment Share on other sites More sharing options...
popland Posted February 9, 2021 Author Share Posted February 9, 2021 Thank you Zach tried your code, and it correctly loop indefinitely with 3 seconds pause (as you can see from my logs here https://codesandbox.io/s/distracted-cray-m3sem?file=/src/App.js), but it looks like after the second slide, everything stops, at every loop the images are not repositioned but stand stills Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 Sorry, I don't understand what you're saying. Do you have a specific question related to GSAP that I can help out with? Link to comment Share on other sites More sharing options...
popland Posted February 9, 2021 Author Share Posted February 9, 2021 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 More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 Oops, I forgot to pass in a the width to the loop function. Updated my version. Your version also doesn't work because you commented out the loop call. Link to comment Share on other sites More sharing options...
popland Posted February 9, 2021 Author Share Posted February 9, 2021 noticed it! thank you... now that it works as expected im digging inside the modifiers Super thanks again Link to comment Share on other sites More sharing options...
phann phearoen Posted May 2, 2022 Share Posted May 2, 2022 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 More sharing options...
Cassie Posted May 2, 2022 Share Posted May 2, 2022 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! 1 Link to comment Share on other sites More sharing options...
phann phearoen Posted May 3, 2022 Share Posted May 3, 2022 @Cassie Thank you for your kind respond!! Yes, repeat: -1 works. Thanks again! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now