A Novice Attempts To Make A Flipbook From SVG Paths

[VectorVictor]

Hello World,

 

I'm brand new to GreenSock and am eager to make some cool-looking animations.

 

What I really want to do is to create a 'flipbook' of sorts where each of the individual paths in an SVG will appear and disappear in sequence, simulating motion. For this project, I can't use the fancy translation/rotation tools on a single object- each path is distinct.

 

I put together a non-working toy example in CodePen and have been hitting the wall. My thought was to stagger changes in opacity (on-off). If this animation works, the toy example will show no more than one line at a time and will simulate the rotation and slight translation of a line.

 

I might be able to put together a kluge in CSS, but the final object of this project will be a 300-path SVG file, so I'd prefer something that's natively able to loop through the paths.

 

Thank you in advance for any help you can throw my way!

See the Pen QWjYqmV by whatsyourvectorvictor (@whatsyourvectorvictor) on CodePen

[ZachSaucier]

Craig is in the process of responding so I'll let him address your post more directly, but I made a flipbook effect before:

See the Pen ydpEBP by ZachSaucier (@ZachSaucier) on CodePen

[PointC]

Hi @VectorVictor 

 

Welcome to the forum.

 

First - great name. Airplane is one of my all time favorite comedies. 👍

 

If I understand your question correctly, you have a few approaches. You could certainly loop through and make it happen. You mentioned a stagger and that would work as well. Here's a fork of your demo with a simple stagger and set() on a timeline. 

 

See the Pen 7a1b6adc1f8c66f59ff889d4b082b23b by PointC (@PointC) on CodePen

 

Is that what you meant?

 

Happy tweening and welcome aboard.

 

[VectorVictor]

1 minute ago, PointC said:

Hi @VectorVictor 

 

Welcome to the forum.

 

First - great name. Airplane is one of my all time favorite comedies. 👍

 

If I understand your question correctly, you have a few approaches. You could certainly loop through and make it happen. You mentioned a stagger and that would work as well. Here's a fork of your demo with a simple stagger and set() on a timeline. 

 

 

 

 

Is that what you meant?

 

Happy tweening and welcome aboard.

 

Roger, Roger!

This is precisely what I was looking for. I'll throw it at my big project and tell you how it worked.

 

Cheers!

[VectorVictor]

@PointC, it worked!

 

Now- this is a bit beyond the scope of the forum, but do you know of a clean way to call the .svg file by name rather than having me clog up my 'index.html' file with 1600 lines of gobbledygook?

 

See the Pen XWmOVgE by whatsyourvectorvictor (@whatsyourvectorvictor) on CodePen

[PointC]

I'm not sure I follow. Do you mean injecting the SVG rather than inline code? 

[VectorVictor]

3 minutes ago, PointC said:

I'm not sure I follow. Do you mean injecting the SVG rather than inline code? 

Yes, exactly. I haven't been able to interact with (that is, animate) the SVG unless I include the whole text inline. The <img>, <object>, <?php> injections haven't worked for me with GSAP.

[PointC]

If you want to animate the SVG child elements, inline code is the way to go IMHO. We do have this thread talking about injecting the code. It may help.

Just food for thought: You may be able to pull off this effect with just a few paths and the morphSVG plugin. Here's a quick demo showing what I mean. I just grabbed two of your paths (out of 167) and morphed between them with a stepped ease. It's not nearly as fluid as your final version, but maybe with 5-6 paths and a morph loop, you could make it work. Or maybe not. Just an idea to possibly reduce your SVG size.

See the Pen 2fdfc6a4261c8c2b95e6fb4549e17e0a by PointC (@PointC) on CodePen

 

Happy tweening.

 

[VectorVictor]

1 minute ago, PointC said:

If you want to animate the SVG child elements, inline code is the way to go IMHO. We do have this thread talking about injecting the code. It may help.

Just food for thought: You may be able to pull off this effect with just a few paths and the morphSVG plugin. Here's a quick demo showing what I mean. I just grabbed two of your paths (out of 167) and morphed between them with a stepped ease. It's not nearly as fluid as your final version, but maybe with 5-6 paths and a morph loop, you could make it work. Or maybe not. Just an idea to possibly reduce your SVG size.

 

 

 

Happy tweening.

 

Thank you for all of your help today. I'll check out that thread. The morph feature looks interesting- I'll also look into that.