Topic 13: Designing, Defining, and Triggering CSS3 Animations without Custom Libraries (Thought Library)

Animations

Since animations were covered before, I will simply create a few real-world examples for this page. You can learn more about animations on my Topic 9 page.

Modal Pop Up

To display new information on the page you can use a modal. This modal will pop up in front of the other information. When it is clicked again it is dismissed.

Slide In

Slide from Right

Another way to animate a web page is to have sections slide in from the side as you scroll down the page. This adds visual interest and highlights sections that are important. If the whole page is displaying in the window, resize the window smaller so you can see the sliders work.

How it's done

Scroll and resize event listeners are added to the window element. When the window is scrolled or resized, a function is called that checks to see if the element is visible in the window. If it is, a class is added to make the animation happen on the sliding element. When the page is scrolled up, and the element goes below the bottom of the window, that class is removed, and a different class is added to trigger another animation, and the element slides back out.

Visible in window

To check if the element is visible in the window, several measurements are needed.

const height = window.innerHeight; The height of the window.
const top = window.scrollY; The top of the window.
const bottom = height + top; The bottom of the window.
const eHeight = elem.offsetHeight; The height of the element.
const eTop = elem.getBoundingClientRect().top + top; The top of the element.
const eBottom = eHeight + eTop; The bottom of the element

To see if the element is visible in the window, compare the different measurements. If (eTop <= bottom && eBottom >= top) the element is visible in the window.

Button Animations

Animations on buttons can aid users in understanding your webpage. Having some kind of animation or transition on hover and active helps a user to know something is clickable.

Information