Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kathryn.crawford

Create corner opening overlay with MorphSVG

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

Or... what Diaco said :)

Link to comment
Share on other sites

Diaco vs Carl 

 

Little old PointC accidentally wandered into the Battle of the Titans here.   :-o  :-P

  • Like 3
Link to comment
Share on other sites

@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 ;)

  • Like 1
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

pls load the MorpSVGPlugin too :

//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js
  • Like 2
Link to comment
Share on other sites

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

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