Jump to content

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

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 comment
Share on other sites

It looks like you just forgot to include any of the necessary GSAP files ;)


In this case, TweenMax and DrawSVGPlugin should suffice. Here's a fork: 

See the Pen 788f06019e42a2e4b6ddd9ba2c4f38f8 by GreenSock (@GreenSock) on CodePen


Does that help? 

  • Like 1
Link to comment
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 comment
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 comment
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




But it needs to be in quotes:



See position parameter:



Does that help? :)


  • Like 3
Link to comment
Share on other sites

Sorry @Jonathan I was making changes instead of forking the proposed code. But, thank you!

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