Jump to content
Search Community

How to animate container horizontally according to number of child elements

iLuvGreenSock test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Do you mean change it so that no green is showing? If so, remove the padding-right on .container__box and change its flex property to flex: 0 0 50%;

 

I'm betting you could simplify your btnEnableDisable function a bit. 

 

What are you trying to do with the for loop with moveBox in it at the end?

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

There are several ways to do this, but depending on the behavior that you want, some are better than others. Do you want the images to wrap? Meaning if you press the next button 6 times, do you want it to go back to the first one? If so, do you want it to go back the opposite direction or continue to go in the same direction ("infinitely")? Are clicks during a previous animation allowed? 

  • Thanks 1
Link to comment
Share on other sites

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
Link to comment
Share on other sites

See the Pen gOOgwZV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I did several things here:

  • I switch out the anchors that you had for real buttons. There's no reason why you should use an anchor for moving slides/images, anchors are for navigation.
  • I switched your (now real) buttons to use the disabled attribute instead. This is not only more semantic and accessible, but is easier to manage via CSS. 
  • I simplified your enable/disable function. You really are just checking two things: 1) is the counter at the first position? and 2) is the counter at the last position? Based on that information, you set the state of the buttons. 
  • I changed your (not working) animations for each box to animate the container instead. It's simpler and more logical. 
  • I added a resize event on the window to keep it responsive.
  • I assumed you would allow the button to be clicked before the animation completes. If you don't want this, you will need to keep track of the animations and check .isActive().

Let me know if you have any questions about my approach! 

 

Happy tweening.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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

 

Link to comment
Share on other sites

12 hours ago, iLuvGreenSock said:

I've updated the moveWidth to the actual width of the image as it can be dynamic?

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

 

12 hours ago, iLuvGreenSock said:

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?

You could do that. Or you could use a variable to keep track of the animation state and change it when the animation starts and ends:

 

See the Pen ZEYYVPo?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...