Create corner opening overlay with MorphSVG

[kathryn.crawford]

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.

[PointC]

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.

[Diaco]

Hi kathryn.crawford 

 

pls check this out : 

See the Pen yYqMpZ by MAW (@MAW) on CodePen.

[kathryn.crawford]

Thanks Diaco, paths are so confusing... 

[Carl]

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

[Carl]

Or... what Diaco said

[Carl]

for bonus points, here's Diaco's version with full-screen, responsive overlay as they do on codrops: http://codepen.io/GreenSock/full/mejWaq/

[PointC]

Diaco vs Carl 

 

Little old PointC accidentally wandered into the Battle of the Titans here.    

[kathryn.crawford]

@Carl, that actually helped another problem I had. I needed to have the visibility for the paths set to "hidden" and then tween it to visible, so I ended up using .set instead of .to! I also added some fill

[kathryn.crawford]

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.

[Diaco]

pls load the MorpSVGPlugin too :

//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js

[Carl]

in case it isn't clear, you specify your external js libraries by clicking on the gear in the js tab (which will launch the pen settings)

 

http://prntscr.com/8yf3fx

[kathryn.crawford]

Oh gosh. I feel so silly. I did the same thing on the other one!