Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pablolo

SnapSVG

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

Any plans to support SnapSVG with a plugin?

 

We are testing the SnapSVG library here and it looks great, but the animation engine sucks soooo much for someone using Greensock for years. 

 

Meanwhile, is there any approach so we can animate SnapSVG proprieties?

 

For example to make the "letter" object below to tween to opacity=1.

 

var letter = this.snap.text(0, 0, "Just a random text").attr({
   "font-size": "20px",
   "opacity":0
})
 
Couldnt figure it out till now. :/
  • Like 2
Link to post
Share on other sites

Maybe check what SnapSVG finally compiles into and tween that, I mean if it produces an element <svg id="something"/> you could animate "#something" with tweenmax...

Link to post
Share on other sites

Michael71, unfortunately SnapSVG does not create html ids for the objects.

 

Carl, the .node object did the trick. But it seems that svg <text> objects does not accept matrix transformations, so tweening "x" does not work, while it works using the boring "animate" built in in snap, because it changes the "x" propriety of the <text> tag directly.

 

Anyways, I dont know if it is the place, but a vote here for a SnapSVG plugin! :)

Thanks a lot for the help.

Link to post
Share on other sites

Diving here:

 

When rotating with their animation engine, this is the <text> tag:

<text x="282" y="698" fill="#e607c1" style="font-size: 94px; opacity: 0;" transform="matrix(-0.809,-0.5878,0.5878,-0.809,626.4715,949.5529)">A</text>

While using Greensock "rotation" tween, this is how it ends:

<text x="792" y="392" fill="#c2570b" style="font-size: 46px; opacity: 1; -webkit-transform: matrix(0.64278, 0.76604, -0.76604, 0.64278, 0, 0);">R</text>

But the second rotation really does not affect the object.

Is there any way to hack Greensock to make it affect the object?

Link to post
Share on other sites

This is all entirely possible (from what I can tell) - it's just a matter of getting familiar with the SnapSVG API and engineering a plugin for it. We're working really hard on a bunch of other things at the moment, and you're the first person to even mention SnapSVG to us (we had never heard of it before), so if there's enough customer demand for it, we'll certainly consider building time into the schedule to attack it. You're welcome to create the plugin yourself too, or just use a generic object and an onUpdate to apply the values on each tick in the way that SnapSVN requires. 

 

If you're working on a project that needs this sort of feature pronto and you'd like to hire us on a consulting basis to build the plugin rather than messing with it yourself, you can PM or e-mail me and we can discuss that, okay?

  • Like 3
Link to post
Share on other sites

Thanks for the hint about Snap.svg Pablolo! Never heard about it, but I see on their site it's created as a modern replacement for RaphaëlJS by the creator of Raphaël, in corporation with Adobe! So I guess support and demand will grow quickly! Looks like a great plugin for working with vector graphics! Version 0.1, so really fresh! 

Can't wait to use it in combination with Greensock!

Link to post
Share on other sites

Thanks a lot Jack.

 

Of course, I understand. I am not complaining! :) I am just trying to see how it works by myself.

 

This is for a personal project, just digging into SnapSVG, since it looks promising.

 

I am trying to implement the onUpdate method as you suggest and then I find another doubt.

 

how do I get the current value of the var being tweened on the onUpdate function?

I am using:

rotation:30,
onUpdate:myFunction,
onUpdateParams:["{self}"]

but the "vars" propriety always show the final value of "rotation" (30) and not the current value.

I couldnt find the current value logging the "{self}" parameter. :/

Am I doing something wrong?

Link to post
Share on other sites

Hi,

 

When you use ["{self}"] as the callback parameter, it refers to the tween, so in your callback to look for the element being tweened you have to call to the tween's target, like this:

TweenLite.to(element, time,
{
  rotation:30,
  onUpdate:myFunction,
  onUpdateParams:["{self}"]
});

function myFunction(tween)
{
  var element = tween.target;//this refers to the element being tweened
}

Now when it comes to transform properties, like rotations, scales, x and y, each tween has a _gsTransform object, that you can use to get the current value of any of those properties, like this:

TweenLite.to(element, time,
{
  rotation:30,
  onUpdate:myFunction,
  onUpdateParams:["{self}"]
});

function myFunction(tween)
{
  var element = tween.target;//this refers to the element being tweened

  console.log(tween.target[0]._gsTransform.rotation);//returns the current rotation on every tween update
}

You can see this picture of how it looks in chrome's dev tools:

nnnx.pngKeep in mind though that this is from a previous version of the engine, so the values are in radians. Since version 1.11 the values are returned in degrees.

 

Rodrigo.

  • Like 3
Link to post
Share on other sites

Thanks a lot Rodrigo. I got it.

But I think I finally find the perfect way. To tween a dummy object and use its proprieties to change the Snap object. Now I can use the SnapSVG with the power o Greensock! \0/

var dummyObj = {};
dummyObj.rotation = 0;
dummyObj.opacity = 0;
TweenLite.to(dummyObj, 1, {
  opacity:1,
  rotation:170,
  ease:Elastic.easeOut,
  onUpdate:this.applySnapTweens,
  onUpdateParams:["{self}", snapSVGElement]
})

var applySnapTweens = function(tween, snapEl) {
	var degrees = tween.target.rotation;
	var opa = tween.target.opacity;

	snapEl.transform("r" + [degrees, 0, 0]);
	snapEl.attr({"opacity":opa});
	
}

I hope this topic helps other people starting with SnapSVG as well.

  • Like 2
Link to post
Share on other sites
  • 4 months later...

Hi all,

 

While I don't think there's anything wrong with the "dummy object" method described above, I've been using Snap.svg for a while after using Raphael and when I made the move to Snap I did a basic port of the RaphaelPlugin to Snap.svg. I've used it rather extensively and haven't found any issues or Snap-related properties (cx, cy, etc) I couldn't tween yet, but haven't had the time to run extensive tests yet either.

 

I have a fork of GreenSock here: https://github.com/anthonygreco/GreenSock-JS which contains the SnapPlugin and a repo with just the plugin here: https://github.com/anthonygreco/GSAPSnapPlugin.

 

Usage is identical to the RaphaelPlugin. (using "snap" in place of "raphael")

 

JSFiddle Example: http://jsfiddle.net/anthonygreco/MAtwr/

 

If anyone uses this and finds any issues feel free to add the issue to github, submit a pull request to the forked repo, reply to this thread, or PM me.

 

Happy Tweening! 

  • Like 6
  • Thanks 1
Link to post
Share on other sites
  • 3 weeks later...

Hey guys, what if i have let's say some complex snap object with multiple paths, polygons, lines etc, and i just want to quickly tint all of their fills with some color and then go back to original?

 

I'm just loading external svgs like that now:

var e = element;
var s = Snap(e[0]);
Snap.load('public/svg/logo.svg', SVGLoaded);
function SVGLoaded(data) {
	s.append(data);
};

How would i do such task?

It sounds simple, but...i guess something like .find must be involved sadly :(

Link to post
Share on other sites

Snap has a select() method: http://snapsvg.io/docs/#Element.select you can use in the callback where you're currently appending the fragment that was loaded. I actually use the method in my previous post JSFiddle example. Assuming you're using my SnapPlugin:

function SVGLoaded(data) {
  var element = data.select('#someId');
  var elements = data.select('.someClass');
  TweenLite.to(element, 1, {
    snap: {
      width: '+=100',
      height: '+=100'
    },
    ease: Quad.easeInOut
  });
  TweenLite.staggerTo(elements, 1, {
    snap: {
      width: '+=100',
      height: '+=100'
    },
    ease: Quad.easeInOut
  }, 0.2);
  s.append(element);
  s.append(elements);
};

*untested code but should give you an idea. :P

  • Like 1
Link to post
Share on other sites

Hmm intersting, i've come to something like that without plugin which works but i'm not sure it's truly efficient...

            // list group hover
            $('.list-group a').hover(function() {
                TweenMax.to(this, 0.42, {className: '+=hover'});

                svgExist = false;
                svg = $(this).find('svg');
                if (svg.length) {
                    svgExist = true;
                    snapAnim = svg.find('*[fill]');
                    TweenMax.to(snapAnim, 0.42, {'fill': '#FFFFFF'});
                    console.log('svg animation ' + snapAnim);
                }
            }, function() {
                TweenMax.to(this, 0.35, {className: '-=hover'});
                if (svgExist == true) {
                    TweenMax.to(snapAnim, 0.35, {'fill': '#2B2B2B'});
                }
            });

What's the actual benefits of using plugin?

I'm just asking to be sure, since we seem to be able to tween dom and all atrrs directly anyway..

 

The whole problem is that i need to access elements after callback of snap, for the reason there are a loooooot of svgs involved dynamically through angular and i need to minimize callback to just append function, so i could avoid laggy loading of those elements..Anything additional cause delays, especially if you're adding direct tweens :(

 

And select function doesn't seem to help too much here i guess, for the reason i have different id's on each layer that i probably will animate somehow directly in future, but now i need to access all elements, therefore i thought svg.find('*[fill]') will do..

Link to post
Share on other sites

I'm not sure I fully understand your issue. You reference the use of angular, yet I see nothing angular related. Why doesn't Snap's select method help? It is the Snap way of selecting elements of a loaded fragment in the callback of the load method. You seem to be using jQuery's find method which I'd imagine is traversing the entire DOM. If you'd like to PM me with more details I'd be happy to try and assist.

 

As for benefits of the plugin, I guess you'd have to try it out and make that judgement yourself. :P

 

Though, I've recently discovered that there are some limitations I haven't worked out such as animating points of a polygon, where using the "dummy object" is the only resolve until I have the time to update the plugin.

  • Like 1
Link to post
Share on other sites
  • 3 months later...

Hi all,

 

I've been working on a site that animates as you scroll (ticking the trend box).

The site uses 'flat' graphical elements with a strong typographic style and I wanted them to be as crisp as possible. Hence the desire to use SVG.

 

anthonygreco's snapplugin has been great - allowing me to easily tween the SVGs within GSAP . 

 

Here's the site: http://blockhead.alloftheabove.co.uk

 

However if you're viewing it in IE you'll notice some issues, one of which I have posted with anthonygreco on Github: https://github.com/anthonygreco/GSAPSnapPlugin/issues/1

 

I'm just posting this because I threw myself in at the deep end with GSAP and made it harder by choosing SVG. I definitely think they are the way forward, and snap is probably the tool to do it. 

 

I for one would definitely like to see the SnapPlugin developed.

 

If anyone has any idea what's going on in the Github issue above I'd be most grateful!

 

 

 

Finally - failure13 asked why use SnapSVG, here's my list:

 

1. Snap allows you to easily work with SVG already in the DOM (Raphael struggles with this - as far as I know you have to use a plugin)

2. Transforming svg child elements has unexpected results when just using GSAP - e.g. scaling with GSAP will keep the SVGs left hand x value whereas snap will scale around the origin of the element. See example pens here: 

See the Pen qjpuB by ticktockreed (@ticktockreed) on CodePen

 and 

See the Pen hkmDf by ticktockreed (@ticktockreed) on CodePen

3. Internet Explorer requires a fallback to transform SVG child elements with GSAP - call a function within onUpdate as Rodrigo mentions earlier in this feed. My test: 

See the Pen yhiHx by ticktockreed (@ticktockreed) on CodePen

4. Snap allows you to easily load SVG into the DOM when required.

5. Snap lets you use modern SVG methods such as clipping and masking.

6. And a whole host of other stuff listed on the snapSVG site which I am still waiting to try out.

7. Its way smaller in filesize than raphael

  • Like 3
Link to post
Share on other sites
  • 1 month later...

Hi ticktockreed,

 

I saw your project really nice animations. I was wondering how you animate/ tween with GSAP and use SnapSVG? I've fiddled a bit with SnapSvg v0.2. At that time it seemed buggy when it comes to animation with different easings and timings. GSAP does a really good when it comes to this. I'm playing with GSAP on my dev-server over at www.myradon.net  You can only use very basic SVG-shapes only with GSAP. Animating paths isn't possible. how can you animate eg. a path form one shape to the other with GSAP+SVG? A good example is on Codrops; http://tympanus.net/Development/OffCanvasMenuEffects/elastic.html It's done with only Snap and CSS3. I would love to use something like that but with GSAP for tweening.

Link to post
Share on other sites
  • 1 year later...

Hey Guys,

 

+1 for an official port from Rafaeljs plugin to SnapSVG plugin. I would love to see it in the near future of GSAP plugin  :)

 

Cheers

  • Like 1
Link to post
Share on other sites

Hi Astroboy and welcome to the GreenSock forums.

 

With all we are doing "natively" with SVG, I'm not so sure a SnapSVGPlugin or RaphaelPlugin are really necessary any more or at all.

CSSPlugin, AttrPlugin and DrawSVGPlugin pretty much handle every property or attribute you would need to animate: http://greensock.com/svg-tips

 

Concerning shape morphing, um, well, there is a new plugin we are going to be releasing to the public this week called MorphSVGPlugin :)

 

One of its greatest strengths is that there is no requirement that the start and end paths have the same number of points.

You can morph a circle into a hippo with ease!

 

http://codepen.io/GreenSock/pen/rOjeRq?editors=001

 

It's loaded with other features that I'm sure folks will love. We've poured tons of time and energy into it.

 

Be sure to watch this:

 

Diaco (demos) and Chris Gannon (demos) have already been hammering on it real hard with awesome results

 

Again, official release will be very soon for Shockingly Green and Business Green members. Keep an eye out for our email announcement. 

  • Like 7
Link to post
Share on other sites

"there is no requirement that the start and end paths have the same number of points." - nearly fell of my seat! amazing! Can't wait to try it.

 

Thanks!

  • Like 5
Link to post
Share on other sites

Very cool stuff indeed! Looking forward to see MorphSVG plugin comes into life :)

 

Cheers guys

  • Like 1
Link to post
Share on other sites

i love how the cape is morphing animating :)

  • Like 2
  • Haha 1
Link to post
Share on other sites

i love how the cape is morphing animating :)

 Absolutely! I had to watch the demo twice to see the other morphs. During my first viewing, I was so mesmerized by that cape I didn't see anything else. So cooooool!  8-)

  • Like 1
  • Haha 1
Link to post
Share on other sites
  • 8 months later...

Hi, is snap.svg is still on your road map?

Currently SnapSVGAnimator appears to be the best option for exporting animated objects,

say characters and props, from Adobe Animate CC.

We would love to combine your familiar API and amazing tweening engine

with the obvious benefit of a streamlined Adobe Animate workflow.

I my opinion allowing to use character animations created with Adobe Animate and SnapSVGAnimator,

but allowing to control the timeline via your platform will be a killer feature!

it has the potential to become the movieclip (for whoever knows flash still) replacement!

  • Like 1
Link to post
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.

×