[How to animate container horizontally according to number of child elements]

Hello Zach,

 

Many thanks for your swift reply again! 

 

Quote

Is there an issue here? I'm not understanding what you're saying.

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!

[How to animate container horizontally according to number of child elements]

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? 

See the Pen xxxgpzY by stanleyyeo (@stanleyyeo) on CodePen

 

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();
  }
}

 

[How to animate container horizontally according to number of child elements]

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

[How to animate container horizontally according to number of child elements]

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!

[How to animate container horizontally according to number of child elements]

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: . Thank you very much for your help.

See the Pen RwwoOEz by stanleyyeo (@stanleyyeo) on CodePen

[Reset animation on new page, Pjax]

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

[Reset animation on new page, Pjax]

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"});
	}
});

 

[Reset animation on new page, Pjax]

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.

[Reset animation on new page, Pjax]

Calling for superheroes.. anyone?

[Reset animation on new page, Pjax]

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?

[Reset animation on new page, Pjax]

Hi @Victor Work,

 

How would ClearProps or TweenMax.set work for a paused tween inside a for loop? Thanks for your help.

[onComplete fires before tween ends completely]

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. ?

[onComplete fires before tween ends completely]

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.

[onComplete fires before tween ends completely]

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.

[onComplete fires before tween ends completely]

Thank you for your reply. @Carl. I'm sorry it wasn't clear. Here's a

See the Pen rQyajb by stanleyyeo (@stanleyyeo) on CodePen

. 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.

[onComplete fires before tween ends completely]

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.

[onComplete fires before tween ends completely]

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. 

[onComplete fires before tween ends completely]

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
  });
}

 

 

[Create page piling with only GreenSock]

@OSUblake you're my superhero!

 

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

 

[Create page piling with only GreenSock]

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?

[Create page piling with only GreenSock]

On 5/24/2015 at 4:22 PM, Diaco said:

Hi guys

 

Learning , OneManLaptop , pls check this out , this can help you to start coding : 

See the Pen dopxrV by MAW (@MAW) on CodePen

@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.