Reveal image with bezier path ?

[Lynx 2 Likes (Newbie)]

Hi, I want to reveal this, using bezier paths, at first it's invisble, then an object moves from the top, down following the path of the image to reveal the image. 

 

How do I hide the image before revealing ?

[OSUblake 18,533 Likes (Superhero)]

Still trying to make stuff grow. 

 

You should start out with something basic like a rectangle.

See the Pen 45acd3617e6ec885fe7df8e1e705e0be by osublake (@osublake) on CodePen

 

Then check out this post by Sara Soueidan to create more complex shapes.

http://sarasoueidan.com/blog/css-svg-clipping/

[OSUblake 18,533 Likes (Superhero)]

Check out my plant generator. It definitely has the growing vine look you were going after. 

 

See the Pen gpGEye by osublake (@osublake) on CodePen

[Lynx 2 Likes (Newbie)]

Still trying to make stuff grow. 

 

You should start out with something basic like a rectangle.

See the Pen 45acd3617e6ec885fe7df8e1e705e0be by osublake (@osublake) on CodePen

 

Then check out this post by Sara Soueidan to create more complex shapes.

http://sarasoueidan.com/blog/css-svg-clipping/

 

This is perfect.  Except I set stroke="#000000" for the id=rect so I could see the rectangle, but the rectangle is not showing with a black outline ?

 

The only problem with your last example; post #3, is varying widths, which I know gsap can't do. 

 

Can you control control the speed to which it's revealed by two methods, the speed someone swipes on a touch device and the speed to which someone scrolls on a desktop ?

[Carl 11,324 Likes (Superhero)]

Great examples, Blake.

 

Lynx, you can't see the border of the rect because it is being used as a clip path. If you could see it then it wouldn't work as a mask.

To see the rect you can just rip out the clip path info in svg and css: http://codepen.io/GreenSock/pen/40d638c9981d1f1afb72c1abfabf4be6

 

Can you control control the speed to which it's revealed by two methods, the speed someone swipes on a touch device and the speed to which someone scrolls on a desktop ?

 

 

Yes, you could use Draggable and ThrowPropsPlugin to contol how quickly the rect grows. In simple terms you can use a ThrowProps tween to control the progress() of the tween that makes the rect grow OR you could use a proxy object that "thows" the height of the rect. Note how the cube in this tutorial spins based on "swipe speed"

http://greensock.com/cube-dial-tutorial 

 

For controlling the speed based on Scrolling please investigate the jQuery plugin ScrollMagic: http://scrollmagic.io/

[OSUblake 18,533 Likes (Superhero)]

Well Carl beat me to it. I was going to suggest just creating a copy of your path while you are working on it, and then animate both of the elements. Just be sure to remove the copy when you are done.

 

See the Pen 45acd3617e6ec885fe7df8e1e705e0be by osublake (@osublake) on CodePen