SnapSVG needs a tweening engine similar to Greensock GSAP!

[Emasoft]

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

There is a Snap.SVG plugin for GSAP: https://github.com/anthonygreco/GSAPSnapPlugin But it's a beta 0.1.0, lacking many features and not very stable.

SnapSVG needs to implement a new animation engine similar to the Greensock one, or to develop a working GSAP plugin, otherwise it will never be used at pro level. GSAP is the de facto standard when it comes to professional web animations, it's 20x faster than jQuery and got the most usable syntax.

[alex-aloia]

Agreed! These two frameworks need to be brought together for more practical usability. Doesn't seem like anyone has come up with a way to cleanly access the snap objects directly.

[tanglx61]

Agreed, would like this to happen as well!

[trokster]

Using tweenlite.js ( gsap ) to set the attributes instead of relying on snap to animate them is smoother at the moment. Not sure why this is, so can't comment. However I am quite confident Snap will have its own optimized mina soon.

I hope anyways :)

[cjgammon]

GSAP has a plugin architecture, I made a pass at writing a plugin that works with snap properties.

https://github.com/cjgammon/GreenSock-JS

Here is an example of the syntax with GSAP:

var s = Snap(1024, 768);            
var rect = s.rect(50, 30, 200, 100);
rect.attr('fill', '#f00');

var poly = s.polygon("21.8,38 61,73.4 31.8,100.7 77.7,115 116.2,139.2 139.9,76.5 169.7,47.3 73.4,25.6 102.6,56");
poly.attr('fill', 'red');

var path = s.path("M70.3,103.2c0,0-7.5-58.4,42.9-48.4s43.5,74.5,72,37.9s49.7-72,67.1-36s83.9,92.5,14.3,96.3c-69.6,3.7-82,18-88.8,44.1c-6.8,26.1-93.8,29.8-91.3-18S75.3,134.9,70.3,103.2z");
path.attr({
   'fill': 'orange',
   'transform': "translate(300, 200)"
});

var circle = s.circle(100, 100, 50);
circle.attr({fill: 'green'})

var tl = new TimelineMax();
tl.add(TweenMax.to(rect, 1, {snap:{fill:"#00f", width:100, height:50, x: 100, y: 100}, ease:Power1.easeInOut}));
tl.add(TweenMax.to(rect, 1, {snap:{opacity: 0}, ease:Sine.easeInOut, yoyo: true, repeat: 1}));
tl.add(TweenMax.to(circle, 1, {snap:{cx: 200, cy: 400, r: 100, opacity: 0.5}, ease:Power1.easeInOut}));
tl.add(TweenMax.to(poly, 1, {snap:{points: "68.4,69.7 11.9,83.3 62.2,102.6 69,148.6 111.3,113.8 178.4,139.5 111.9,47.9 103.2,62.9 42.3,36.8"}, ease:Quad.easeOut}));
tl.add(TweenMax.to(path, 1, {snap:{tx: 0, ty: 0, scaleX: 1.5, scaleY: 1.5}, ease:Quad.easeOut}));
tl.add(TweenMax.to(path, 1, {snap:{d: "M39.9,110.7c0,0,18.6-42.2,68.9-32.3s38.5,11.9,67.1-24.7s44.7,9.8,62.1,45.9s39.1,77-30.4,80.7c-69.6,3.7,19.9,26.1,13,52.2c-6.8,26.1-110.6-11.8-108.1-59.6C115,125,44.8,142.4,39.9,110.7z"}, ease:Quad.easeOut}));     

[ghost]

Did that work okay for you? I'm struggling with animating paths, because I want to do it with the timing and easing of GSAP..

Now I'm just calling functions with onStart:

http://www.tooi.org/svganimate/

// Snap.svg
var el = document.querySelector('#play');
var s = Snap(el.querySelector('svg'));

var pathLeft = s.path("M75,75H25V50h50V75z");
var pathRight = s.path("M75,50H25V25h50V50z");

snapTiming = 500;
snapEasing = mina.easeinout;

function pause () {
    pathLeft.stop().animate({
        'd' : 'M75,75H25V57h50V75z'
    }, snapTiming, snapEasing);

    pathRight.stop().animate({
        'd' : 'M75,43H25V25h50V43z'
    }, snapTiming, snapEasing);
};

function play () {
    pathLeft.stop().animate({
        'd' : 'M75,75L25,50l0,0l50-25V75z'
    }, snapTiming, snapEasing);

    pathRight.stop().animate({
        'd' : 'M75,75L25,50l0,0l50-25V75z'
    }, snapTiming, snapEasing);
};

function reset () {
    pathLeft.stop().animate({
        'd' : 'M75,75H25V50h50V75z'
    }, snapTiming, snapEasing);

    pathRight.stop().animate({
        'd' : 'M75,50H25V25h50V50z'
    }, snapTiming, snapEasing);
};

// GSAP
var svg = $('#play svg');
var tl = new TimelineMax({
    repeat : -1,
    repeatDelay : 1
});

var gsapTiming = 1;
var gsapEasing = Expo.easeOut;

tl.to (svg, gsapTiming, {
    rotationZ : 90,
    ease : gsapEasing,
    onStart : pause
})
  .to(svg, gsapTiming, {
    rotationZ : 180,
    ease : gsapEasing,
    onStart : play
})
  .to(svg, gsapTiming, {
    rotationZ : 0,
    ease : gsapEasing,
    onStart : reset
});