My Top 5 Techniques for Web Animation

Summary

This video script delves into the common techniques used in award-winning web animations. It highlights the 8020 rule, emphasizing the dominance of a few key methods. The top five techniques discussed include scroll tracking, viewport detection, sticky position, easing, and text splitting, each crucial for creating smooth and engaging animations. Additional bonus techniques such as the map function, lerp, and shaders are also explored, offering a comprehensive guide for mastering web animation and enhancing the user experience on websites.

Takeaways

• 🎨 The speaker has been remaking award-winning animations for a year and works at a web agency focusing on creative animations.
• 🔄 The 80/20 rule, or Pareto Principle, is observed in web animations, with 80% of animations being created using 20% of techniques.
• 📊 Scroll tracking is a common technique used to create animations based on the progress of a page scroll, with tools like Scroll Trigger and Scroll Hook recommended.
• 🔄 Smooth scrolling is preferred for animations linked to the scroll to avoid a 'jumpy' effect, with Lenis Scroll and Locomotive Scroll being popular choices.
• 🌐 Viewport detection is essential for triggering animations when an element enters the viewport, with Intersection Observer API and tools like Gap or Framer being used.
• 🔩 The sticky position technique uses CSS's native functionality and is supported across all browsers, offering a simple yet powerful way to create animations.
• 🎭 Easing is crucial for setting the mood and vibe of a website, with different types of easings giving websites their unique character.
• 📝 Text splitting allows for animations at the character, word, or line level, opening up a wide range of typographic animations, with tools like GSAP's Split Text and Split Type.
• 📏 The map function is a versatile tool for transforming values across different ranges, useful in various animation scenarios including scroll tracking and pointer events.
• 🔍 Lerp (Linear Interpolation) is frequently used in requestAnimationFrame for creating smooth animations, particularly in cursor and canvas API animations.
• 🌌 Shader is a powerful, albeit less common, technique for creating experimental animations, offering a unique dimension to web animations and requiring a different approach.

Q & A

What is the 8020 rule or Pareto principle mentioned in the script?

The 8020 rule, also known as the Pareto principle, specifies that 80% of the consequences come from 20% of the causes. In the context of web animations, it means that a small number of techniques are responsible for the majority of animations seen online.

What is scroll tracking and how is it used in animations?

Scroll tracking is a technique where the progress of a user's scroll is tracked for a certain portion of the page, often returning a number between zero and one. This number can be transformed and used to create animations that respond to the user's scrolling action.

What are some tools mentioned for implementing scroll tracking animations?

The script mentions 'Scroll Trigger' by GSAP and 'U Scroll Hook' by Framer Motion as preferred tools for implementing scroll tracking animations.

Why is smooth scrolling important when linking animations to the scroll?

Smooth scrolling is important because it prevents the 'jumpy' effect that can occur with regular scrolling, ensuring that animations linked to the scroll are smooth and visually appealing.

What is viewport detection and why is it essential in web animations?

Viewport detection is the process of triggering an animation when an element enters the viewport. It's essential because many animations are designed to start when elements become visible to the user.

How is the sticky position technique used in animations?

The sticky position technique uses CSS's sticky positioning to create animations that are easy to set up and free from bugs due to its native browser support. It requires creative thinking to avoid obvious use of this technique.

What role does easing play in web animations and why is it important?

Easing is crucial in web animations as it sets the mood and character of a website. It determines how animations start and end, influencing the overall feel and user experience.

What is text splitting and how can it be used for animations?

Text splitting is a technique where a paragraph is deconstructed into lines, words, and characters. This allows for individual animation of each element, opening up a wide range of potential typography-based animations.

What are some tools or libraries for text splitting in animations?

The script mentions the 'Split Text' module from GSAP and the 'Split Type' library as tools for text splitting in animations.

What is the map function in the context of animations and how is it used?

In animations, the map function is used to transform a value from one range to another, allowing for scaling, translating, or adjusting opacity based on scroll progress or other input values.

What is LERP (Linear Interpolation) and how is it utilized in animations?

LERP is a function used to create smooth transitions between values, often used within the requestAnimationFrame for creating fluid cursor animations or interpolating between shapes and colors in canvas animations.

What is a Shader and how can it be used in web animations?

A Shader is a technique used for creating experimental animations, often seen in artistic or 3D web designs. It adds a unique dimension to animations, requiring a different way of thinking and offering opportunities for creating novel visual effects.