Jump to content


Trying to tween a Snap.svg element using a dummy object.

Moderator Tag
Go to solution Solved by Diaco,

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

In the Codepen listed, I'm trying to tween a Snap.svg element with a dummy object. I first learned about this technique here:




But... alas I have been unable to make it work. I'm not really sure why it's not working.


For the record, I'm aware that Greensock has a Raphael plugin, but the project requirements commit me to using Snap.svg. I also just generally prefer Snap.svg and would LOVE to use my favorite tweening tool to make it work. I'm also aware that a forum user wrote a port for the Raphael plugin about a year ago... but there's been no recent activity on Github and I was unable to get it to work.


Thanks for any and all help in advance!

See the Pen VLMwqM by Joe_Temp (@Joe_Temp) on CodePen

Link to comment
Share on other sites

I think this is totally possible because I've seen some admins suggest it. I just think I'm confused on how dummy objects work.

Link to comment
Share on other sites

Thanks for the demo. Very helpful. You were close but there were some problems


1: you were passing SnapSVGElement as an onUpdateParam and it was triggering an error: http://prntscr.com/7ifw33 but it should be snapEl


2: the onUpdate function wasn't firing because it was defined after you created your tween. 


To troubleshoot its a good idea to add things like console.log("update") to see if functions are firing and to always check the console for errors.


This should get you in the right direction: http://codepen.io/GreenSock/pen/jPGqBL?editors=001

Link to comment
Share on other sites

It just occurred to me that you don't need any of that onUpdate stuff.

GSAP has amazing support for animating SVG and Snap is great for creating them.


You can just do stuff like this


var s = Snap(500, 500);

//method 1 reference node of snap element
var snapEl1 = s.rect(0,40,160,160);
TweenLite.to(snapEl1.node, 1, {rotation:360, transformOrigin:"50% 50%"})

//method2 assign an ID to snap elmeent
var snapEl2 = s.rect(210,40,160,160);
snapEl2.attr({id:"snapEl2", fill:"#ff0000"})
TweenLite.to("#snapEl2", 2, {rotation:360, transformOrigin:"50% 50%"});
Link to comment
Share on other sites

Nailed it Carl!
Do you know if it would be possible to tween the ACTUAL path? Because that's what I really need. For example:



var snapEl = s.rect(0,0,160,160)



Not really sure how that works since those aren't attributes but rather the dimensions of the SVG.


Thanks again for your help!

Link to comment
Share on other sites

  • Solution

Hi joe_temp  :)


that's just svg rect  x , y , width , height  property 


try this :

var s = Snap(500, 500);
var snapEl1 = s.rect(0,40,160,160);
  • Like 1
Link to comment
Share on other sites

Diaco.AW: Thanks!


I will try and post Codepen to prove it works and for posterity!

Link to comment
Share on other sites

This... this right here is why I use GSAP.


You guys are amazing.


See the Pen VLMjaK by Joe_Temp (@Joe_Temp) on CodePen


Snap.svg + GSAP... deal with it.

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.