vektor Posted November 15, 2019 Share Posted November 15, 2019 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 More sharing options...
Shaun Gorneau Posted November 15, 2019 Share Posted November 15, 2019 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 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 15, 2019 Share Posted November 15, 2019 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); 4 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted November 15, 2019 Share Posted November 15, 2019 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! ? 2 Link to comment Share on other sites More sharing options...
vektor Posted December 12, 2019 Author Share Posted December 12, 2019 Aha, perfect, thanks!! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now