Jump to content
GreenSock

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

Animate two items from the middle at the same time

Recommended Posts

Attempting to make two brackets animate from the middle to their positions at opposite sides of the page has proven to be more difficult than expected. You can see, commented out, in the codepen a few attempts and half-solutions.

 

Method 1 is good and works without flex, however we are trying to make this work with flex if possible.

 

Method 2 works with flex however the brackets start on contrasting sides of the page as opposed to both initialising in the middle - this could be an OK quick fix if used with something like opacity at 50% width to make it appear that they start in the middle - also not sure how to do this so any suggestions/solutions would be welcome!

 

Method 3 is just an example of an issue which seems to have occurred multiple times while attempting to resolve this problem, whereby both lines of code work perfectly animating the individual element with the other line of code commented out, however attempting to make both lines of code together so far has not provided any results. Is this a bug perhaps?

 

Is there someone out there who could provide a solution and perhaps explanation for these occurrences, and show me how to make this work - ideally with flexbox?

 

Many thanks.

See the Pen LYYXNgy by lyndonfarrvektor (@lyndonfarrvektor) on CodePen

Share this post


Link to post
Share on other sites

Hi @vektor,

 

The problem here is tweening the left and right properties. That's typically no fun because those properties are affected by the element's position property. While sometimes left/right has its place ... it usually best to to tween x/y.

 

To do so in this case, we have to define points offset from the midpoint of the page (window.innerWidth), initially move to those points, and then move back to {x: 0}

 

Have a look here. Hope this helps!

 

See the Pen XWWyjMP?editors=0110 by sgorneau (@sgorneau) on CodePen

 

  • Like 3

Share this post


Link to post
Share on other sites

What Shaun said is definitely the core of the issue. A small side note is that in GSAP 3 it's more proper to put the duration inside of the vars parameter, like so:

 

tl.from(".bracket-l", { duration: 1, x: midPointOffset }, 0)
  .from(".bracket-r", { duration: 1, x: -midPointOffset }, 0);

 

  • Like 4

Share this post


Link to post
Share on other sites
39 minutes ago, ZachSaucier said:

What Shaun said is definitely the core of the issue. A small side note is that in GSAP 3 it's more proper to put the duration inside of the vars parameter, like so:

 


tl.from(".bracket-l", { duration: 1, x: midPointOffset }, 0)
  .from(".bracket-r", { duration: 1,x: -midPointOffset }, 0);

 

 

Doh! Old habits are hard to break! 🤪

  • Haha 2

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.

×