Jump to content


Lining up multiple inline-block elements with each other using dynamic x/y values

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

Hey there, I was a longtime GSAP user on AS3, and now am happily using it on a JS project (and hopefully many future JS projects.)


I'm trying to figure out two problems right now.


1. In the attached codepen, at the end of the animation, I've got 4 visible blocks (out of 15) that I need to line up with one another, so they are horizontally centered in their container. I can't position them absolutely, so I need to calculate the relative offset, based on the center of the container, to animate them to. The fact that they change height during the animation also means that I can't safely calculate this position at the beginning.s


2. Related, what's the best way to handle dynamic properties? For example, should I create the movement tween above after the timeline finishes? And what's the recommended way to handle window resizing, which would necessitate recalculating the positions again?


I realize that some of the problem stems from CSS, so if anyone has any suggestions on the CSS in the code snippet as well, I'd love to hear them. :)


BTW - I'm using ScrollMagic as well, but the issue is the same if I remove that.


Thanks in advance for any help/suggestions! I've been really impressed with GSAP on JS.

See the Pen jshmi by dunnington (@dunnington) on CodePen

Link to comment
Share on other sites

Hi kendo  :)


try this :

remove line 11 - 14 and put this after line 10

.to('.icon:not(".pick")', 1, { width:0 , margin:'0px', display:"none" });

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

Link to comment
Share on other sites

Thanks for the reply, ! I did try the 'zero width/height' route, unfortunately it's not really the desired effect I'm going for. I don't think I explained the end result very well, so here's a rough picture illustrating the desired effect (I just manipulated the matrix values until it looked about right. Mostly.)


I need the 4 blocks lined up like this, though properly centered and spaced. Ideally, I'd be able to move them into another container and let the browser handle placement and spacing, but I can't think of a way to do that without causing them to 'jump' or trigger some layout nastiness in the process.


Link to comment
Share on other sites

hmmm ... ok , try this : 

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

    .set('.icon:not(".pick")', { display:"none"})
    .set('.icons > div', {display:"inline-block"})  

unfortunately Display isn't tweenable , if you want to tween i think it`s simplest way that change your dom structure and put all of icons in one div

Link to comment
Share on other sites

I think I need to do something with x/y coordinates, since I do need the transition to 'lined up' state to be smooth. I updated the CodePen to reflect a cleaned up version of what I was working with before (lines 9-33). It basically uses the container to figure out where the first x/y position should be, then calculates the difference between the block's current x/y and the desired x/y based off the center position. This is a pretty ugly, and not really functional solution, but it *kind of* works, sometimes, with extra tweaking. ;)

Link to comment
Share on other sites

Hello .. i noticed your example didn't work in Firefox .. looks like the CSS was missing -moz prefix for translateY() ...   .vertical-align() rule:


.vertical-align() {
     position: relative;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -moz-transform: translateY(-50%); /* missing this line for Firefox */
     transform: translateY(-50%);


Or you can just use GSAP to set() the translateY (y) for you, this way GSAP will handle the cross browser prefixes for you.



Link to comment
Share on other sites

See the Pen jshmi by dunnington (@dunnington) on CodePen


I managed to get this working properly. I basically calculate an initial x/y point based on the calculated height of the container and the icon, adding 25px to the y value to account for the +=25 I add to the height during the animation, then calculate the final x/y values for each icon in a loop, using its index to determine the offset I want. It doesn't do anything on window resize, which is fine, since it looks good down to a certain point, but a simple "min-width" takes care of that problem.


It's complicated, but not nearly as complicated as I was worried it would be. :) Time to go brush up on my trig and geometry, I think ...

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.