MennoPP Posted January 25, 2021 Share Posted January 25, 2021 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 { top: 5%; left: 5%; opacity: 1; } .cryptoIconAnimated .cryptoIcon_eur { top: 25%; left: 55%; opacity: 0; } See the Pen JjRQxqR by DESIGNfromWITHIN (@DESIGNfromWITHIN) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted January 25, 2021 Solution Share Posted January 25, 2021 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 🤔 1 Link to comment Share on other sites More sharing options...
MennoPP Posted January 25, 2021 Author Share Posted January 25, 2021 Thank you! Indeed the wording could be better... I assumed opacity was watched by default. Quote Flip only concerns itself with transforms, width, height, and opacity. If you want your Flip animations to affect other CSS properties, Link to comment Share on other sites More sharing options...
akapowl Posted January 25, 2021 Share Posted January 25, 2021 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 More sharing options...
GreenSock Posted January 25, 2021 Share Posted January 25, 2021 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). 2 Link to comment Share on other sites More sharing options...
GreenSock Posted January 25, 2021 Share Posted January 25, 2021 Correction: apparently there's an issue preventing my updates to the docs from getting saved right now, so you probably won't see the update I made yet. We're working on that. 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