Haha Shane this page is awesome Counldn’t stop until I’ve seen all the scenarios Did you make the graphics, the scenes? It’s very nice and fun, and this public humiliation vignette is so funny (:
So, relatively unsorted:
- works like a charm in Chrome… very well.
- almost doesn’t even work in Safari
- the beginning is a bit confusing, you have to wait a bit for the first vignette to be zoomed in (but it’s a detail)
Now, as for animation and complexity, there’s two ways to handle that when you’re a developer. Either you go with a step system with delays like Webflow does, and there’s even some ways to make it better (I think about Apple Keynote who has a very clear step by step system), OR you go full horizontal timeline with multiple tracks and keyframes, tweening etc.
Step system is for quick, simple anims and timeline based are not limited in complexity, it’s for “real animation”.
Where is the limit? Well, the limit is when, using a step system, you thing to yourself “damn I wish I had a timeline”, or in another words, when you’ve reach a point where you barely control anything, you can’t or difficultly can debug or modify your anim, or when you end up having lists of delays values written on a paper aside your computer.
Step system are for simple, short anims. Like you, I’ve been using it to do insanely complicated stuff, it’s fun, it works, but I barely can modify it now, and I had to find fixes for Safari (overflow:hidden especially will start to but at a moment but it’s easily fixable with SVG mask and custom code).
Far from me to want to deny Webflow being able to do good on animations, but when you have a project that solely requires animations and long ones with forks, get the right tool for the right job. In your case, I guess Tumult Hype3 would be great, and even better, Adobe Edge Animate, because in the end it will allow you to add a lot of intelligence to your application (like sharing, gathering scores etc).
As for your questions, small PNGS would not sensibly perform faster than SVGs. What do you mean about “optimize the transitions” ?