Wrap around pole effect ?

[Lynx 2 Likes (Newbie)]

Can GreenSock make animated ribbon effects, for example; ribbon wrapping around a pole ?

[GreenSock 18,233 Likes (Superhero)]

GSAP can animate pretty much any property of any object, but it's not something that you can just say "make a ribbon wrap around a pole", no. For that, you'd probably need to do some fancy work with SVG or canvas, and use GSAP to animate the Beziers or something. 

[Lynx 2 Likes (Newbie)]

If I wanted to create an effect where as lines or swirls were drawn on the screen, since I'm not familiar with canvas, SVG could do this, hrm trying to wrap my head around this ?

[GreenSock 18,233 Likes (Superhero)]

I didn't quite understand your question. How exactly would you like us to help you? Was there a specific question about the GSAP API? 

[Ihatetomatoes 325 Likes (Leader)]

@Lynx I've created a ribbon like animation on this SVG Christmas card by animating clipPath on a few parts of the SVG.

 

So to answer your question, yes you can create a ribbon like animation, you just have to be a little bit creative with your CSS and HTML.

 

Hope that helps.

[Lynx 2 Likes (Newbie)]

@Lynx I've created a ribbon like animation on this SVG Christmas card by animating clipPath on a few parts of the SVG.

 

So to answer your question, yes you can create a ribbon like animation, you just have to be a little bit creative with your CSS and HTML.

 

Hope that helps.

 

Ihatetomatoes - what about multiple lines or lines that swirl ?

[Ihatetomatoes 325 Likes (Leader)]

You can apply the clipPath to an SVG group.

 

Check out these two articles to see how clipPath works:

 

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

http://tutorials.jenkov.com/svg/clip-path.html

[Lynx 2 Likes (Newbie)]

You can apply the clipPath to an SVG group.

 

Check out these two articles to see how clipPath works:

 

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

http://tutorials.jenkov.com/svg/clip-path.html

Clipping masks are useless with all current browsers, clipping paths may work, depends if there are browser compatibility problems, I have to test again.