Interactions pushed too far?

[moreofthesame (Shane Hurt)]

Hi Peoples,
I’ve been working on an interactive decision tree with a tonne of SVG’s and quite complicated interactions. Its working fine in Chrome, sort of ok in Firefox & like a dog in Safari.

What im looking for is advice on how to get consistent performance across browsers? will png’s perform better than svg’s? Is there a trick to optimise the transitions?

Preview Link:
https://preview.webflow.com/preview/doyoubuythatgirladrink-v2?preview=758429c9f687c3d041f48ae64e977fd8

Live Link:
http://doyoubuythatgirladrink-v2.webflow.io/

[vincent (Vincent Bidaux)]

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” ?

[cyberdave (Dave S.)]

Wow ! Awesome site @moreofthesame, I am going to have to look at this one in more detail, very nice, I love it cheers, dave

[moreofthesame (Shane Hurt)]

Thanks Vincent, yes, I wrote and illustrated all the scenarios. Thanks for you advice on Hype3, I’ll check it out, but damm, I really don’t want to rebuild it. I’m sure it would be a breeze for someone that kicks arse is Js.

What I meant on optimising the transitions was, less steps ie. No zoom out, just move across. I’m playing with that at the moment, will let you know how I go.

[tim]

Oh Wow! This is great! Must have been an investment of time as well! Respect!

[perkristian (Per Kristian Grindeim)]

Lol. Great site. I agree with @vincent that for more complex animations the step animation in Webflow can be hard to keep track of the elements and to make changes.

Keep up the good work! Cheers

[vincent (Vincent Bidaux)]

I feel I should add something, that Webflows interaction system is awesome because a few clicks lead to a complex interaction. The UI feels very natural. I can’t wait for new triggers and a few minor tweaks that have been listed under the wishlist and acknowledge by Webflow as good ideas. When we’ll get a trigger that allow us to swap classes based on events… imagine the field of possibilities!