Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kitxune

SVG Embed Video Framework with DrawSVG

Recommended Posts

Hello, I'm trying to make an animation using a SVG file as framework of a embed video.

 

I don't know how to make rect and paths to animate, I've tried everything.

 

 

The animation should be from the center of the top line to the left and right and while advancing paint the path and ends in the central part of the bottom line. The final animation is not important, for now, but the svg does not move at all in codepen.

 

 

 

See the Pen OggLMV by eifersucht (@eifersucht) on CodePen

Link to post
Share on other sites

Sorry, was my first time creating code in codepen.

 

The rect is animated, but the paths no, and I don't know why.

Link to post
Share on other sites

Ah, that's because your paths are not stroked at all - they're actually filled. Remember, DrawSVGPlugin animates the stroke of a path. You'd need to adjust your paths so that there's one single path drawn in the center, that's stroked (whereas currently it's like it's outlined, with the path going around the edges and filled in rather than stroked). 

  • Like 5
Link to post
Share on other sites

Hello @kitxune and welcome to the GreenSock Forum!

 

Looks like i saved too slow Jack beat me to the punch with a better answer ;)

 

It wasn't animating due to you missing the quotes around your relative position parameter value -=4 should be "-=4"

 

See the Pen mwwJVN by jonathan (@jonathan) on CodePen

 

You had this -=4 without quotes

 

.from("path",10,{drawSVG:0},-=4)

 

But it needs to be in quotes:
 

.from("path",10,{drawSVG:0},"-=4")

 

See position parameter:

 

 

Does that help? :)

 

  • Like 3
Link to post
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.

×