Jump to content
Search Community

Animation applied to class list not effecting all elements in list

ChrisJol test
Moderator Tag

Recommended Posts

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

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!

  • Like 1
Link to comment
Share on other sites

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. 

  • Like 3
Link to comment
Share on other sites

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