user profile image

Click the hotspots to make Huggy Laser Pandas. The factory is animated on click. The animation was made in sections to be reassembled for responsive. Made with GSAP + SVG.

Article on how this was made: http://davidwalsh.name/gsap-svg-responsive-animation

(my original Huggy Laser Panda Pen is here: http://codepen.io/sdras/pen/MweKRb)

Comments

  1. jim @jimthornton on

    very cool. i was wondering how to click activate timelines.

  2. adorable, i love it!! :)

  3. I've always wondered how you make your animated characters. Now I know!

  4. @AmeliaBR, this is the first time I've used this technique- usually I adjust an SVG sprite like this article details: http://www.smashingmagazine.com/2015/03/17/different-ways-to-use-svg-sprites-in-animation/, but I have a post coming out soon that explains how this was made, too :)

  5. @sdras

    What? So you don't usually build an animated factory in order to create an animated animal? Now I'm disappointed.

    P.S. But a serious discussion of your techniques would be interesting, too.

  6. Im not a developer i just do wordpress and joomla and want to sell your elements

  7. This is so good, it

    My favorite part is when they get painted :)

  8. @AmeliaBR, Oh my goodness I can't believe I missed that joke! Haha yes I have a little factory in my bedroom. Haha.

    @natewiley, that's my favorite part, too!

  9. Impressive

  10. Incredible!

  11. Very cool.

  12. Wow is Amazing ...

  13. very interesting :)

  14. very impressive work!!

  15. This is awesome, but the tap targets are really small. Makes it a pain to experience on mobile.

  16. @niaconis, good point. I have tiny fingers so I should have tested on someone else. I'll get back in there and fix that. thanks for letting me know :)

  17. @sdras this is such beautiful work! Congratulations :)

  18. I just love your work. I have started learning GSAP. Your tutorials will really help me. You are awesome.

  19. nice job Sarah, could you see whats problem my cod? http://codepen.io/Hadipour/pen/QjqbMz please please

  20. Really awesome

  21. @Hadipour, sorry, just saw this- first- you have a semicolon instead of colon in the width for the main-menu, but I think what will really fix it is if you change the width from 100% to 1000px on the .fixed class. Hope that helps!

  22. This is awesome! I need to create my own SVG powered rube goldberg machine now!

  23. Simply amazing. Thanks so much for writing the article about how this was created. Very grateful!

  24. amazing :]

  25. Wooooooooow, just woooow

  26. Almost as cute as you.

    This is wonderful and a super useful tutorial too. Thank you Miss Sarah.

    Showing s ome love from New Orleans

  27. Awesome Pen... Lots of potential for training and production line simulations. Thanks Sarah.

  28. What tool can one use to layout so many svg elements? I usually do this in code but its too time consuming for something this big.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...