Animate two items from the middle at the same time

[vektor 11 Likes (Newbie)]

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

[Shaun Gorneau 1,573 Likes (Superhero)]

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

 

[ZachSaucier 1,409 Likes (Superhero)]

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);

 

[Shaun Gorneau 1,573 Likes (Superhero)]

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! 🤪

[vektor 11 Likes (Newbie)]

Aha, perfect, thanks!!