popland Posted February 17, 2021 Share Posted February 17, 2021 I got the following slider that is working quiete correctly (still need to bind the next/prev button but that is not my concern) the images slides by the size of the container box and get wrapped so that the loop is infinite the size of container box is calculated at startup with let boxWidth = gsap.getProperty(container, 'width'); and i need to recalculate it when the window is resized, i attached a listener to the resize and with the function i can recalculate the new box width function recalc() { console.log(gsap.getProperty(container, 'width')); boxWidth = gsap.getProperty(container, 'width'); } but it looks the newly calculated width is ignored by my animation function that is already running via a delayedcall how can i reset the animation and have it restarted correctly with the new width? See the Pen WNbmvgB by lenna-the-vuer (@lenna-the-vuer) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2021 Share Posted February 17, 2021 You're updating the boxWidth variable but not your pwrap variable which is dependent on the boxWidth variable. So update the pwrap variable in your resize function as well. Link to comment Share on other sites More sharing options...
popland Posted February 17, 2021 Author Share Posted February 17, 2021 Thank you for your reply, i did it (i also added the pwrapWidth in the recalc), but still ignoring it Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2021 Share Posted February 17, 2021 Please do not save changes to the same pen that you've already posted to our forums previously. Instead please use the "fork" button to create a new version so that context is not lost in these forums. Thanks! As for the remaining issue, it's again a logical issue. You're using the same exact passed in boxWidth the entire time because your loop function passing in the same variable called boxWidth to the next call of loop instead of using the global variable. Make sure that doesn't happen and it works: See the Pen abBWKqq?editors=0010 by GreenSock (@GreenSock) on CodePen Side note: There's no reason to be adding your tweens to a timeline in this case. Doing so is one of the most common GSAP mistakes. Link to comment Share on other sites More sharing options...
Solution popland Posted February 17, 2021 Author Solution Share Posted February 17, 2021 Thank you, i used a timeline in an attempt to kill and restart the animation its still not working properly while resizing (guess its the pwrap), but ill try to sort it out See the Pen RwoVBgW by lenna-the-vuer (@lenna-the-vuer) on CodePen Working version Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2021 Share Posted February 17, 2021 8 minutes ago, popland said: i used a timeline in an attempt to kill and restart the animation You can kill and restart tweens with out a timeline... 8 minutes ago, popland said: its still not working properly while resizing Is something wrong with the demo that I shared? Link to comment Share on other sites More sharing options...
popland Posted February 17, 2021 Author Share Posted February 17, 2021 it looks that somethimes it works and sometimes it doesnt (so it does not work) i move also gsap.set(imgObj, { x: function (i) { return i * boxWidth; }, }); inside the recalc function, and seems to work, but it is not your example still got my problem, when resizing white bars appears and images overlap Link to comment Share on other sites More sharing options...
popland Posted February 17, 2021 Author Share Posted February 17, 2021 my bug looks like here: See the Pen RwoVBgW by lenna-the-vuer (@lenna-the-vuer) on CodePen if you resize while the animatio is going (start the resize and leave the resize before the animation ends), the alignement break up if, while resizing you wait the end of animation before leaving the resize handle, the slider revert to the first image and line up correctly, but you should "leave" the resizing before it restart so that's why i was thingking to suspend the animation while resizing and resuming it at the end Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 17, 2021 Share Posted February 17, 2021 You definitely should kill off animations in the resize function and set things up properly, no question. If you have a question about GSAP let us know 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