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.

Thank you @Sahil, I appreciate your time to reply. Sorry, let me correct myself, what I observe is onComplete gets fire at the last split second when the tween ends (before it reaches yPercent: -100), not after. transform: translate(0%, -100%) matrix(1, 0, 0, 1, 0, 0); The tween for each elem will be played when it detects the delta in the mousewheel event. So it's indeed very strange as I did not use any stagger tween.

Thanks @Sahil for your swift reply! What i'm puzzled is that on Codepen, it works perfectly well. However on my actual code, onComplete function doesn't wait for the tween to be fully complete before it gets called. In fact, onComplete fires just when the tween is about to complete. I've also increased the tween duration to 3s and onComplete gets fired 3s while tween started slowly and ends another 3s later.

Hi guys, I've a tween for all my elements in a for loop and it works as expected in Codepen. The onComplete function call basically is to change a var to back to "true" when the animation ends. However onComplete gets fire just before the tween ends when this is on my actual code. I'm not sure why this is happening. Hoping someone can advise. Thank you so much! for (var i = 0; i < elem.length; i++) { elem[i].myAnimation = TweenLite.to(elem[i], 1, { yPercent: -100, ease: Power1.easeInOut, onComplete: onAnimationCompleteEnd, onReverseComplete: onAnimationCompleteEnd, paused: true }); }

@OSUblake you're my superhero! You're provided exactly what I'm looking for. Not only does GSAP rocks, the community is totally awesome!

Wow, thanks for your very swift reply and detailed explanation! I really appreciate your help! Don't I need to declare this element mySuperAwesomeAnimation? Any docs that I can read this up?

@Diaco, I just want to say thank you so much for your demo! How does the chaining ".anim" work in the for loop from your demo? I forked your demo and it works with any names I've used. Sorry for a noob question.