Jump to content
Search Community

GSAP Flip not animating CSS opacity

MennoPP test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Can somebody tell me why flip works but the SVG icons are not transitioning the opacity?

(click change to see animation)

The CSS position is transitioning using GSAP Flip, but the opacity is not.
 

function animateCryptoIcons() {
    const state = Flip.getState(".cryptoIcon");
    group.classList.toggle("cryptoIconAnimated");
    Flip.from(state, {
        absolute: true,
        duration: 0.8, 
        stagger: 0.1,
        ease: "power1.inOut"
    });
}

 

.cryptoIcon_eur {
    top5%;
    left5%;
    opacity1;
  }
.cryptoIconAnimated .cryptoIcon_eur {
      top25%;
      left55%;
      opacity0;
 }

See the Pen JjRQxqR by DESIGNfromWITHIN (@DESIGNfromWITHIN) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey @MennoPP

 

By default, Flip only concerns itself with transforms, width, height, and opacity. If you want your Flip animations to affect other CSS properties, you can define a configuration object as the second parameter with a comma-delimited list of props, like:

 

(...in your case for the opacity)

 

const state = Flip.getState(".cryptoIcon", {props: "opacity"});

 

https://greensock.com/docs/v3/Plugins/Flip/static.from()

... text above to be found under 'Usage' on that docs-page.

 

 

See the Pen 8d1bf36f4041cb965a5025f29d470050 by akapowl (@akapowl) on CodePen

 

 

Is this what you were after?

 

Edit: 

And now, reading through it myself a second time, I realize it says that opacity is supposed to be respected by default 🤔

 

  • Like 1
Link to comment
Share on other sites

 

10 minutes ago, MennoPP said:

I assumed opacity was watched by default

 

Yeah, I myself at first thought it actually wasn't.

 

Before I copy pasted the text from the docs, I had written something in my own words along those lines.

Only after posting my answer with the text replaced with the snippet from the docs, I realized in the docs it says that opacity is supposed to be respected by default. Adding the props in the second parameter does seem to work, but @GreenSock or @ZachSaucier would have to chip in to tell you why it doesn't by default - or why it might not be working in your case.

 

Link to comment
Share on other sites

Sorry about the confusion there - I have updated the docs accordingly. Although technically it records opacity by default (in order to accommodate the "fade" feature), it doesn't animate that value unless you specify it in the list of props (or of course if you're swapping elements and set fade: true).

  • Like 2
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...