Lesson Outline

Animating with Javascript

In the previous lessons, we have covered creating animations using CSS keyframes, through using Angular animations, and through using Ionic animations. In this lesson we will be covering one more method for creating animations. Using Javascript, we can directly manipulate the properties of elements to create an animation effect. We can either create the illusion of animation by making small increments in quick succession, or we can make sudden changes to properties but have that change be animated through the use of the transition CSS property.

This approach is generally useful for creating more complex effects in response to user input, for example creating a parallax effect when the content area is scrolled:

With the previous approaches, we defined a specific animation, and then played that animation at a particular point in time. This approach allows us to add more logic to our animations as they are playing.

The transition property

We've briefly mentioned the transition property in CSS and you will likely have used it in the past. This property allows you to animate the change of CSS properties, like going from full opacity to no opacity, or from one position to another.