Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
iLuvGreenSock

How to animate container horizontally according to number of child elements

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: https://codepen.io/stanleyyeo/pen/RwwoOEz. Thank you very much for your help.

Share this post


Link to post
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?

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×