Jump to content
Search Community

Create corner opening overlay with MorphSVG

kathryn.crawford test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to recreate this demo in GSAP. http://tympanus.net/Development/FullscreenOverlayStyles/index9.html

My codepen isn't working at all, and I'm not sure why. And yeah, I know it might be the "closed" shape, because it's 0px wide everywhere (so maybe non-existant?). I've tried it with <path id="closed" d='M500 100 L600 600 L600 0 L0 0 Z' />, and that didn't work either :( not sure what's up here. Maybe visibility issues?

See the Pen RWBGXx by kathryncrawford (@kathryncrawford) on CodePen

Link to comment
Share on other sites

Hi Kathryn,

 

I took a quick look at your pen and noticed that jQuery/UI and the MorphSVG plugin were not loaded so the console is showing some errors looking for those scripts. If you need a path to the MorphSVG plugin, you can find it on this GreenSock pen. 

See the Pen rOjeRq by GreenSock (@GreenSock) on CodePen

 

I don't know if that's the only problem, but it should get you one step closer. :)

  • Like 3
Link to comment
Share on other sites

In addition to what PointC said, your svg doesn't have styling (stroke or fill colors) so I couldn't see anything at all even with the js removed.

 

I made a very quick square in illustrator for my #start shape, then made a copy for the #end and moved the bottom left corner very close to the top right corner and it seems to work fine. I would probably add an additional set() to the timeline to set the opacity to 0 once the tween is done. I left it as-is so you can see the start and end shape

 

http://codepen.io/GreenSock/pen/gajmeX?editors=100

  • Like 5
Link to comment
Share on other sites

Ok, now I have a different problem. I'm adding this code to another codepen, and while it worked fine on the original one (morphSVG tweened the visibility to visible while morphing), this one is not changing the visibility. 

 

See the Pen JYBRVR by kathryncrawford (@kathryncrawford) on CodePen

 

All the overlay code is at the bottom. FYI I have to do visibility and not opacity, because otherwise my hover effects won't work, but regardless, I had no success with opacity either.

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