iLuvGreenSock

Hello Zach, Many thanks for your swift reply again! No issue just thought that moveWidth would be better off controlled by the width of the image instead of the number "2" as I might want to show 3 images at one go. But no issue at all. I'm thankful for this forum and I know I can safely use GSAP in all my projects because of the helpful superheroes here. Appreciate it!

Hello Zach, I'm sorry for the late reply. Your approach is perfect and solved what I am looking for - Especially the enable/disable function. Never thought of that! Thanks a lot! I've updated the moveWidth to the actual width of the image as it can be dynamic? Codepen here I thought having the isActive() would be good too. So I should assign the tween to a variable like this and then play the single tween afterwards in the function? var moveWidthTween = TweenLite.to(container, 1, { x: -moveWidth * currentIndex }); //play it in the function function slideNext(e) { if(!moveWidthTween.isActive()) { moveWidthTween.play(); } }

I thought of all the possible ways you mentioned, and for now just want to keep it simple and getting the tweens of all the dynamic images recorded for the container: Images don't wrap When the button reach the last image, next button automatically disables. This is why the btnEnableDisable() function exists. Infinite clicking not required

Hello Zach, Thanks for your reply! I wasn’t clear, sorry. My demo currently has got 6 images, but the number of images can be more or less. The slider will be showing 2 images at a time, wrapped by .mask class. What i wan to achieve is when next button is clicked, the ‘.container’ class containing all the images will move 1 image width to the left. The ‘green’ background is just to illustrate that there’s padding in between every image. And when prev button is clicked, container will move 1 image to the right. moveBox is to record all the tweens for all the images, thereafter how to transfer the tweens to the parent container is a big question mark to me. Hope i explain this proper. Thanks!

Hi all superheros, I'm creating a horizontal slider where there's only 2 buttons to navigate left and right. Images are inside a div 'container' class. Question: How do I assign the width of each box to add up as the total width of the container to tween? Here's my Codepen: https://codepen.io/stanleyyeo/pen/RwwoOEz. Thank you very much for your help.

Yes all works now. Thank you very much @GreenSock. Awesome library and best community ever!

Yup, it doesn't work. I tried using clearProps like this below. Paused tweens doesn't reinit. Barba.Dispatcher.on('transitionCompleted', function(currentStatus, prevStatus) { for (var i = 0; i < element.length; i++) { element[i].anim = TweenLite.to(element[i], {clearProps:"all"}); } });

Sorry if I wasn't clear. I'm also in the same situation of using barbajs and would like to know of a way to reinit my tweens. I understand from previous correspondence in this thread to use ClearProps or TweenMax.set is the way to go. For example: TweenLite.set(element, {clearProps: "all"}); So now if I want to reinit paused tweens inside a for loop, how would that work out to be? for (var i = 0; i < element.length; i++) { element[i].anim = TweenLite.to(element[i], 1, { y: 100, ease:Power1.easeIn, paused: true }); } Thanks so much! Appreciate your time and help.

Calling for superheroes.. anyone?

for (var i = 0; i < element.length; i++) { element[i].anim = TweenLite.to(element[i], 1, { y: 100, ease:Power1.easeIn, paused: true }); } Something like this?

Hi @Victor Work, How would ClearProps or TweenMax.set work for a paused tween inside a for loop? Thanks for your help.

It seems that this css rule is the main culprit in my code. All animation is silky smooth after removing this. Hope this will help anyone encountering the same issue. * { transition(all .3s ease-in-out); } So sorry for wasting everybody's bandwidth. ?

Thanks to all the superheroes @Sahil, @mikel, @GreenSock, @Carl for all your inputs/advise. I've actually used a cross-browser plugin https://www.npmjs.com/package/jquery-mousewheel on my actual code to manage the mousewheel event since it (the one on my Codepen demo) doesn't work on webkit browsers. This JS plugin also changed GreenSock JS to v1.18.0 instead. Just mentioning though I know this won't help you guys in understand the core issue.

Ok, do you know if it's possible to delay the onComplete call? Or add some delay time at the end of my tween before the onComplete call? This is already a reduced test case on Codepen.io. What I'm trying to understand is why the same code words in Codepen but not in my actual code. Thank you nonetheless @GreenSock, appreciate it. I'm sorry if this isn't the right place to post my question.

Thank you for your reply. @Carl. I'm sorry it wasn't clear. Here's a demo. Works perfectly ok on Codepen.io but on actual code, the onComplete fires before tween ends. Hope this help you to point me in the right direction. Thanks a lot in advance to you awesome guys.