Jump to content


Coil up a SVG graphic ?

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

I'm still going to put this online. I've just been stupid busy these past couple of weeks. However, I should have time next week to wrap it up and put it online. 


I did manage to get enough time to help one our newest members out, @bQvle, and it paid off. He made a class for PIXI.js that will tile images along a path instead of stretching them. I dropped his file into my project and all of sudden my paths became a smooth looking rope. I already had the points calculated, so it worked out nicely.





For anybody else that is curious about how to make a texture bend using PIXI, you're going to have to figure out where points on the curve are or were you want them to be. You can interpolate the path using time, but that will make all the points evenly spaced which can become an expensive operation. I flattened the curve to set tolerance, which is more accurate in figuring out things like where it's going to bend and where it is relatively straight. I uploaded an example of how the flattening works.


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

  • Like 5
Link to comment
Share on other sites

Really awesome Blake :)

Link to comment
Share on other sites

Very cool indeed, sir. Thanks for sharing.

Link to comment
Share on other sites

Found another cool trick. Tiling is just repeating, so why not offset the tile to make it move. You can even do stuff like the DrawSVG plugin.


Flowing lava

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

  • Like 6
Link to comment
Share on other sites

Wow, Blake. Excellent job porting the concepts from that AS3 tutorial. Great stuff.

Link to comment
Share on other sites

Blake, the image must be tilable, just so the image does not stretche ?


The SVG image I have is not tilible friendly as it's all designed in Illustrator, I could claw back the amount of design I do to the image, but I can't make it tilable without destroying the design.


Seeing your other example Blake it appears the SVG graphic doesn't need to be tilable, if there are enough control points, you can miniuplate the control points to animate how you want it via either CodePen / JSFiddle (I know everyone on this forum from what I see adores CodePen :)) then spit out those coordinates to most likely JS put that in a script file and it will simply animate as it was set out to animate, then it would be how I envisioned. :)

Link to comment
Share on other sites

I've been out town and haven't had a chance to reply.



Thanks! Flash might be on it's way out, but the concepts are still very relevant. In fact, I just bought 3 books from Amazon on doing Flash animation because I think the examples in the book will be easy to port over using GSAP and a canvas library like PIXI. I know the authors are probably going to be a little shocked that somebody just bought their book on doing Flash.



The graphics are done using WebGL and texture mapping. I don't know if that could even be done using SVG. You would probably have to get real creative with the use of something like patterns, masking, or clipping. I also doubt SVG would even be fast enough to handle an animation. 


You can scale the textures, so it doesn't have to be tileable, but the images I used are tileable.











Link to comment
Share on other sites

Wonderful textures Blake :D


I believe that the flash player browser plugin is on deaths door. But IMHO, Flash Professional is not going anywhere anytime soon.


Carl brought to my attention that Flash Professional CC can now export canvas, as well as WebGL with GSAP JS. Which is pretty cool, for those of you who still love using Flash Pro, and being able to use it with GSAP JS, instead of GSAP AS3. Flash pro is way better than Adobe Edge, and if your already familiar with Flash then its a win win.


If anyone still hasn't seen the latest video on the YouTube GreenSock Learning channel. I would strongly recommend that you look at this video by Carl called:


Flash Pro Export HTML5 with GSAP


Great buttery goodness!



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