How to Start Making Cool Animations on Website

Animations on the web, one of the hottest design trends of 2019, has become an integral part of user experience for modern websites. You can find animations on websites everywhere, whether it be subtle transitions or an entire website with cool animations. Illustrations, interactive details, and the dynamic effects make the modern website fundamentally different from the previous designs. When creating a new custom theme animations on the web are added using CSS, but for more complex animations, we need to use javascript also.

#1 CSS animations

Animations can be simple as adding a hover effect animation to a button with a CSS property “transition”. In this example, we made CSS for “button”, and “button:hover”. Nice transition into hover is made by setting “transition” property to a button.

See the Pen qzprzv by Ivan Jurković (@ijurko) on CodePen.

Animations can be more than transitions like header animation on our pages. Here we are animating our background position, but “animation-iteration-count” property is set to infinite;

See the Pen OezjMe by Ivan Jurković (@ijurko) on CodePen.

#2 Js libraries for web animations

You have more options and control over website animations with Javascript. Basic Javascript has its own animation functionality, but most animations are done through additional libraries. JavaScript performance depends on the chosen library. But complex animations made with JavaScript may increase web page load time.

JavaScript animations offer more power and flexibility than transitions or animations written in CSS. They’re widely used for advanced animations like bouncing, pausing, stopping, and slowing down.

GreenSock (GSAP)

GSAP is one of the most popular JavaScript animation libraries with diverse options for animations. It’s used to animate each property individually so you can scale, rotate, and move anything easily. And GSAP is flexible, so you can use it to animate almost anything: CSS, SVG, DOM. Actually, you can use it anywhere JavaScript runs. It’s a powerful JavaScript library that enables front-end developers and designers to create robust timeline based animations. This allows for precise control for more involved animation sequences rather than the sometimes constraining keyframe and animation properties that CSS offers.

Before coding, we first need to add the GSAP library to our HTML file. To do this, you will need to grab the CDN link to the TweenMax library. You can find links to TweenMax and other GSAP CDNs here. When you include all of the files lets look at an example using GSAPs timeline.

GSAP uses a Tween, single movement in animation. In GSAP, a tween has the following syntax:

TweenMax.method(element, duration, vars)

method refers to the GSAP method you’ll like to tween with.

element is the element you want to animate. If you want to create tweens for multiple elements at the same time, you can pass in an array of elements to element.

duration is the duration of your tween. It is an integer in seconds (without the suffix!). vars is an object of the properties you want to animate. More on this later.

Here is a complete cheat sheet I found when I was starting with GSAP and it helped a lot.

A starter example from GSAP

See the Pen Support Starter Pen by GreenSock (@GreenSock) on CodePen.

Here we are animating our box with class “.red” to an “x:500” which will be the same as translate(500px, 0). After the animation completes, the next item in the timeline is called, in this case, it will be “.blue”.

But with GSAP we can create really complex animations. GSAP can be used with a variety of another js library to trigger animations. A great example is our front page which has a loading animation and is also triggered on scroll/click to change the slide. A great example of a GSAP animation is our new homepage.

AOS

So you want to know how to trigger animations as you scroll up and down a page, without having to code a bunch of different keyframes yourself? Behold, the Animate On Scroll library is just what you are looking for!

This library is very easy to setup and use. All you have to do is include CSS and javascript files from CDN link in GitHub directory and initiate AOS on loading by using: 

// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

Now to actually animate an element all you have to do is add the “data-aos” attribute to your HTML element and specify the animation name that you would like to use.

<div data-aos="animation_name">

Here’s an example of working AOS animation:

See the Pen AOS – animations by Ivan Jurković (@ijurko) on CodePen.

You can find an example of our own work with AOS all over our site while scrolling through content.

To conclude: if you require a complex website animation, you will need some kind of a Js library to help you with animating. If you think GSAP and AOS was not the best option for you, there is a tone of others to chose from.