Jump to content
Search Community

Animate two items from the middle at the same time

vektor test
Moderator Tag

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

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

  • 4 weeks later...

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...