Jump to content
Search Community

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

joe_temp test
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:

 

http://greensock.com/forums/topic/8604-snapsvg/

 

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

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:

 

From:

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

To:

s.rect(0,0,200,350)

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

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