Jump to content
Search Community

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

kendo 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

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

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.

post-11085-0-26381100-1415296631_thumb.png

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

 

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.
×
×
  • Create New...