Just seen this site (linked below) and it has a cool banner with a pyramid of blocks which are animated to fall over when hit with a circle element.

http://andreaslagerkvist.com/blog/2015/how-to-create-a-scrolling-twitter-feed-for-your-website/

It's really cool. Just sit watching it for 20/30 seconds or so and you'll see the animation.

 

My question here is: Should I jump into HTML5 canvas and just use HTML5 canvas natively... or should I be using one of these html5 engines that are all over the place? (like crafty)

Take a look at GSAP http://greensock.com/gsap

 

Note: You will have to have a grasp of at least the basics in JavaScript to use this library, but then you will also need to know JS to get much use out of <canvas>

A key test for any website and associated functionality is to make sure it works on a phone and on a 3G network.

 

The linked to site doesn't. In any case, people aren't going to hang around for 30 seconds to see an animation that adds nothing useful. These sort of effects are slightly interesting for about a nanosecond, after they they just become annoying (in most cases).

 

Remember the little trail of stars that used to follow your mouse pointer. Or <marquee> or walk on presenters, or popups that jiggled, or things that faded into and out of view. All very pretty but all doomed to end up in the dustbin of things.

I completely agree about animation for animations sake. It can help give a site an initial wow factor but quickly gets in the way.

 

If you want animated content then use an animation tool like Opus Creator, or Adobe Animate where you can actually see what you are doing.

I completely agree about animation for animations sake. It can help give a site an initial wow factor but quickly gets in the way.

 

If you want animated content then use an animation tool like Opus Creator, or Adobe Animate where you can actually see what you are doing.

 

If you want animated content use CSS or JavaScript if you need complex tweens / timelines.

This is how modern websites are built and there are many good libraries for animating.

 

@@fisicx animation done right especially for gestures and to improve UX is a great thing to add in - if done right, and it doesn't necessarily have to take much time at all, many basic animations can be written with CSS which takes up barely any memory at all, for a simple transition you're talking bytes of data. GSAP is a little more heavy but 30 seconds download? Not even close.

 

 

That said the code written in the tutorial is dreadful, IDs everywhere in the CSS, Global variables being declared with multiple script tags... I wouldn't put any faith it it.

Edited May 16, 201610 yr by rbrtsmith

animation done right especially for gestures and to improve UX is a great thing to add in - if done right.

Indeed, but the very best animation doesn't get in the way. As you say, it can assist the user but all too often people add animations just because they can.

 

Try this. Hover from left to right - and go all the way to the right: http://apycom.com/menus/16-yellow-green.html

Indeed, but the very best animation doesn't get in the way. As you say, it can assist the user but all too often people add animations just because they can.

 

Try this. Hover from left to right - and go all the way to the right: http://apycom.com/menus/16-yellow-green.html

 

Those menus are dreadful, and they're selling them for money too! Scandalous.

 

If you want animated content use CSS or JavaScript if you need complex tweens / timelines.

This is how modern websites are built and there are many good libraries for animating.

 

That's the difference between being a developer and being a designer. Javascript and GSAP are programming tools - fine for programming UX effects or for animations of limited complexity but not for designing creative animation or interactive and doing it efficiently.

 

That's the difference between being a developer and being a designer. Javascript and GSAP are programming tools - fine for programming UX effects or for animations of limited complexity but not for designing creative animation or interactive and doing it efficiently.

 

You can create more complex animations in code than you ever could with a design tool, you are limited by the tool, whereas a developer is only limited by their own ability. Just browsing around on Codepen you see thousands of examples. http://codepen.io/thebabydino/

It can also be done much more efficiently than you might imagine - doing it by code is the defacto standard in the industry when were talking about big budget websites. These animation programs also produce code that is horribly inefficient which means poor performance for users with limited bandwidth or lower powered devices.

Edited May 17, 201610 yr by rbrtsmith

I think we're probably talking about two different things. You're probably referring to animating the content of a website product images etc whereas I'm talking about creating animated or interactive content itself. For me those examples are the equivalent of colour cycling of the 80s and 90s.

 

Let me be clear, I accept that efficient UX animations are best done in CSS, javascript etc. But animated and interactive content is a visual skill, requiring a visual development tool. I also agree that the content must justify the overhead but it can be done. It's also not difficult to modify a website's content for limited bandwidth.

 

There was a time when the quality of shockwave material was enough for people to wait to download that and Flash still hasn't gone away and was until recently very popular with design and developer alike even though it has an overhead. Indeed, I'd argue that the success of Flash has prompted many of the scripted solutions you highlight. Further I think you'll find that these script-based solutions will only have to be hand-coded for as long as it takes for someone to put a visual interface on them.

 

And that's ignoring the fact that while you may have the skills to develop material like that efficiently, many people don't - otherwise no-one would be using our products, or Adobe Animate or Google Web Designer etc. In fact no-one would be using DreamWeaver, or resorting to 1&1 for their websites.

 

We've had customers design whole websites in Flash and now in our HTML5 - can't say I'd recommend it but doesn't mean it doesn't work for them - they're usually sites for rock bands or other creatives wanting something different.

 

It's horses for courses.

Take a look at GSAP http://greensock.com/gsap

 

Note: You will have to have a grasp of at least the basics in JavaScript to use this library, but then you will also need to know JS to get much use out of <canvas>

is that free to use? I saw they were selling something in a a getting started video but it might just be for a plugin.

 

if a website is heavy on animation... then it's unlikely that it's intended to be used on a mobile phone using 3G anyway... but I take those points on board

 

Edited May 18, 201610 yr by HighDarren