ChrisJol Posted January 9, 2020 Share Posted January 9, 2020 I am trying to apply and animation to each 'pedal' in a flower bloom animation that I am trying to make. I'm using .from('.pedal') to apply x: 0, y: 0, scale: .5, and opacity: 0 to each pedal, but for whatever reason it does not apply these effects to the first and third element. If I remove all the elements and just apply the animation to either the first or third element it works fine. it's only when it's in a list of all 8 elements does it not work. Does anyone understand what's happening? I've posted a codepen with the code. See the Pen LYEdmdw by chrisjol (@chrisjol) on CodePen Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted January 9, 2020 Share Posted January 9, 2020 What browser are you seeing this issue? In Safari, I see no issue whatsoever. Link to comment Share on other sites More sharing options...
ChrisJol Posted January 9, 2020 Author Share Posted January 9, 2020 I'm getting the issue in both safari and chrome, here's what it looks like _bloom.mp4 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted January 9, 2020 Share Posted January 9, 2020 Ah, it was so subtle I missed it! I see what you're talking about now. It's all about the transform origin and the type of transform (moving along the x and y axes). All of the petals are still in their basic "box" position and the ones that "stand out" are transforming in a direction that is visually unappealing. All transforms are happening, just in a way that "relatively" doesn't look right. Instead, maybe look at transform: rotate() for the petals and tweening those from a relative rotation. Something like this, See the Pen bGNvxoq by sgorneau (@sgorneau) on CodePen Hope this helps! 1 Link to comment Share on other sites More sharing options...
mikel Posted January 9, 2020 Share Posted January 9, 2020 Hey, Just an alternative See the Pen povLxvx by mikeK (@mikeK) on CodePen happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
ChrisJol Posted January 10, 2020 Author Share Posted January 10, 2020 Oh that makes sense, thank you that helps. Also those colors with the mix-blend-mode are beautiful 1 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted January 10, 2020 Share Posted January 10, 2020 @ChrisJol Happy to help! Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 10, 2020 Share Posted January 10, 2020 The core of the issue here is related to how GSAP 3 handles translates of exactly -50% differently than other translates. This is because browsers report transforms in pixel values, but since offsetting elements by -50% is so common GSAP does a specific check for those values. You can see that this is true by changing the -50% to another value like -51%: See the Pen MWYGwNW?editors=0100 by GreenSock (@GreenSock) on CodePen This is one of the many reasons why we recommend that people put all transforms related to elements that they'll be animating in GSAP. Shaun's and mikel's demos works around the issue by not using translate in the CSS at all. mikel's demo also sets the rotation via GSAP which is preferable. 3 Link to comment Share on other sites More sharing options...
mikel Posted January 10, 2020 Share Posted January 10, 2020 Hey Zach, For your explanation you deserve a bloom. See the Pen KKwoOBQ by mikeK (@mikeK) on CodePen Kind regards Mikel 2 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