How are they doing this?

Hi guys,

I recently came across this site:

and thought it was pretty nice. I’m interested in how I can integrate similar animation on my own sites. I like the way that certain things move when I scroll to them. For example, when the homepage loads the green bowl moves in from the left and the tins on the right move up.

What is it that the developer has used to do this?

Many thanks for any suggestions!

Happy New Year!

Mostly JS, but also some CSS3 animation.

An easy way to test this is to turn off JS. Most of the functionality disappears, but you’ll still see some jar lid animation without JS.

The animation itself can be implemented using CSS3 keyframe-based syntax – @keyframes rule to be more specific – to add the initial and final styles and a series of properties to set the start, direction or directions and duration of the animation.

Here you have some examples of the rule, which you can even download, in the following page:

As you see, you can develop well performed, smooth animations without scripting at all.

There are many other examples and tutorials out there.

The problem is that @keyframes rule is only supported by modern browsers:

[I]- Chrome 2+,

  • Safari 4+,
  • Firefox 5+,
  • IE10 PP3,
  • iOS Safari 3.2+,
  • Android 2.1+.
  • Opera 12+[/I]

For a more detailed approach to the subject, there are a series of compatibility tables like:

http://www.quirksmode.org/css/contents.html
http://www.webbrowsercompatibility.com/css-properties/tablet-phone/
http://www.normansblog.de/demos/browser-support-checklist-css3/

And others.

Although modern browsers render this and other rules properly, not every user updates their software regularly. Even in the case of automatic update features that ensure a timely installation of recent releases, a percentage of users turn off automatic updating and are still using out-of-date versions.

Internet Explorer only renders this rule from the 10 version, which requires Windows 7+ to be installed.

A good approach to ensure multibrowser efficiency would be using @keyframes rule in combination with some user agent version detection technique to load the appropriate script or library to create the same animation effect.