Jump to content
Search Community

Insert text inside SVG polygon

klyvoon test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

  • Solution

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.

:)

 

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