Jump to content
Search Community

SVG Embed Video Framework with DrawSVG

kitxune test
Moderator Tag

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

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

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

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.
  • Create New...