View Full Version : How to do flipbooks?

3 Aug 2011, 9:47 AM
Hello, been using this tool for a while and getting some great results. One nagging thing is how to best to flipbook style animations with a sequence of images (bitmaps). It is easy to load in new images and place them on the timeline sequentially, but what is the best way using the tool to remove images from the page as the animation plays? Imagine a walk cycle of 4-5 images for example. I've been hacking through this by setting a keyframe that sets opacity to 0 at the end of the display time for each element, but that seems hack-ish and doesn't display well on Safari. Is there a way (using the tool) that could dynamically set the display or visibility attribute for an element?

3 Aug 2011, 12:08 PM
There is a "Custom CSS" field at the bottom of the property bar where you manually could write the display/visibility css, but I am not sure how well that would work since it isn't really an animatable property.

What happens when you use opacity?

3 Aug 2011, 12:21 PM
Thanks for your reply. I'll try the custom CSS to turn display on and off. I have found that animating opacity is quite slow and not always reliable on Safari (desktop and mobile), especially if you have more than 4 or 5 animated objects on the page.

3 Aug 2011, 12:34 PM
Opacity is usually really fast for me. Are you doing it like shown in the image below?
Only the last keyframes has opacity set to 0, so the transition from opacity:1 to opacity:0 only is supposed to take a fraction of a second.

3 Aug 2011, 12:38 PM
Thanks, yes mine is set up that way as well, but have found that playback in Safari is inconsistent, objects do not always animate back to 0 opacity, particularly if that object's timeline is looped (iterations greater than 1). Works much more consistently in Chrome.