Unicef web animations

Question

Can someone tell me anything about gate animation and zoom page transition from this Unicef web, I want to try to make this cool animation. At least give me "keyword" how to find it. Are those made with html5 ?

Answer 1

In the Unicef animation the developers are using a mix approach of JavaScript using GSAP JS library and CSS Transitions.

You can have a looks at their code in bundle.js and screen.css files using Chrome developer tools.

Generally you can use:

• CSS Keyframe Animation
• CSS Transitions
• JavaScript vanilla or some libraries
• Web Animation API

to animate DOM elements in your HTML page.

To help you to get started I have created a simple scale/zoom effect using CSS Keyframe Animation, but you can reach a similar effect using JavaScript libraries as jQuery, GSAP, Velocity or others.

For more complex animations I would suggest to use a specialized JS library as GSAP, if instead you need more simple, eyes catching animations you could consider also using some pre-made effects:

• animate.css (CSS Keyframe Animation)
• animatelo.js (Web Animation API) - disclaim I have created this library :)

It really depends of the complexity of you animation and your skill set.

#mario {
  background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215);
  background-repeat: no-repeat;
  width: 375px;
  height: 375px;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-animation: leaves 5s ease-in-out infinite alternate;
  animation: marioAnim 5s ease-in-out infinite alternate;
}

@-webkit-keyframes marioAnim {
  0% {
    -webkit-transform: scale(1.0);
  }
  100% {
    -webkit-transform: scale(2.0);
  }
}

@keyframes leaves {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(2.0);
  }
}

<div id="mario"></div>