klyvoon Posted June 16, 2022 Share Posted June 16, 2022 Hi, I'v been watching this forum for a month and i'm really impressed with all the features GSAP have ! You guys are great ! I'v been trying to reproduce an animation inspired by this topic I could achieve some of it, but I have been stuck on the problem for some days. My goal is to have the text being simultaneously displayed as the morph's end. For instance as the yellow shape morphs. It's been like a Rubik's cube, whatever i change in the HTML or GSAP part, i end up with weird effects... My code so far : Any tips or guidance to how I can insert the text will be of great release ! Thank you ! See the Pen 1d42d0846dfd7e31fd77464499235dad by klyvoon (@klyvoon) on CodePen Link to comment Share on other sites More sharing options...
Solution PointC Posted June 16, 2022 Solution Share Posted June 16, 2022 Hi @klyvoon Welcome to the forum and thanks for joining Club GreenSock. 🎉 The issue here is an empty clip-path. If you want the yellow morph to reveal text, you'll need to use a duplicate path in the clip-path. I've forked your pen and just used one path to show you how to do it. See the Pen 1b01743fc6aa3e078c7d3cd2937967f6 by PointC (@PointC) on CodePen A few other things: I'd recommend updating to the GSAP3 syntax. Stagger is a bit different now so be sure to check out that difference. Your pen was loading the latest GSAP, but also a really old TweenMax file. (could cause problems) Hopefully that gets you morphing. If you have other GSAP questions, let us know and we'll get you sorted out. Happy tweening and welcome aboard. 2 Link to comment Share on other sites More sharing options...
klyvoon Posted June 17, 2022 Author Share Posted June 17, 2022 Great !! I achieved the desired result thank to your guidance ! Can't wait to learn more ! 1 Link to comment Share on other sites More sharing options...
PointC Posted June 17, 2022 Share Posted June 17, 2022 Looks good. Use your new powers responsibly. Happy tweening. 1 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