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

Hm, could you elaborate a bit about what exactly you'd like GreenSock to do in this regard? Like what would you want/need from us for your dream workflow? GSAP is rendering layer agnostic, so you can use it pretty much anywhere you want (well, anywhere JavaScript runs). 

 

Perhaps you could ping the SnapSVGAnimator and/or Adobe folks asking if they'd offer an option to export GSAP-based code. :) We don't have much control over what Adobe's tool spits out but I agree with you that it'd be pretty cool to be able to consistently use GSAP as the runtime engine for animations and have total control using a familiar API. 

Link to post
Share on other sites

Sure. Publishing a SnapSVG-Animator document from Adobe Animate gives you a javascript object (SVGAnim) with an interface similar to a flash movieclip, with play(), stop() etc methods that control the playback of the animation created in the Authoring tool. The graphics are, like the name suggests, stored as data and at playback time converted to SVG graphics in the browser.

A really powerful situation would be when a GS tween could wrap such an object and allow integrating it via a tween into a GS timeline, controlling the SVGAnim, such that scrubbing through the GS timeline would control the timeline of the SVGAnim object.

Link to post
Share on other sites

Hm. Do you have a link to any docs for that SVGAnim? Is there any reason you couldn't use GSAP to control it already? Does it have frames or the concept of seek() or currentTime that could be tweened? 

Link to post
Share on other sites

Hi Powtoon,

 

Do you have a simple example of something you created with SVGAnim where you can give a movie clip on stage and instance name and then use JavaScript to set or get its x and y properties?

 

if you can do someSVGThing.x = 200 you should be able to do TweenLite.to(someSVGThing, 1, {x:100});

 

The trouble is without having any documentation for SVGAnim or knowing what methods / properties it supports its very difficult (or basically impossible) for us to understand how GSAP could or would work with it. See the dilemma?

 

It would definitely be cool to animate SVG output from Animate with GSAP, so please let us know if you find any more info. I looked at the github repo and I didn't find anything about any type of scripting support.

Link to post
Share on other sites

After publishing from adobe animate you get the JS library implementing the SVGAnim class in the output.

Attached a sample animation generated by Adobe Animate CC with the SnapSVG-Animator plugin.

Looking forward to hearing your thoughts on this!

 

snap_svg_sample_output.zip

 

Link to post
Share on other sites

I didn't have much time to analyze all the JS, but from a cursory glance it seems to support gotoAndStop() and to get the total frames there appears to be an m_frameCount property. Again, you'll need to verify this, but if it's true then it should be as simple as: 

function GSAPify(movieClip, fps) {
    movieClip.stop();
    fps = fps || 60; //default to 60fps
    var playhead = {frame:1};
    var totalFrames = movieClip.m_frameCount;
    var currentFrame = 1;
    return TweenLite.to(playhead, totalFrames / fps, {frame:1}, {frame: totalFrames, onUpdate:function() {
            var frame = Math.round(playhead.frame);
            if (frame !== currentFrame) {
                movieClip.gotoAndStop(frame);
                currentFrame = frame;
            }
        });
}

Then you'd feed your MovieClip instance into that function, along with the frames per second, like GSAPify(yourMC, 30) and it'll spit back a tween that you can control very easily, like seek(), progress(), reverse(), play(), or whatever. 

 

Again, you might need to tweak the property names or methods based on the official API for SVGAnim but hopefully this gets you going in the right direction.

 

Does that help at all? 

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.

×