GSAP & ScrollTrigger Crash Course for Webflow

Summary

This tutorial demonstrates how to use Gap and Scroll Trigger to create advanced web animations in Webflow. It covers adding the necessary libraries, using Code Sandbox for coding, and animating elements like thumbnails, titles, and hero images with various properties and durations. The lesson also explores creating staggered animations, timelines for sequenced animations, and looping animations. Additionally, it teaches how to control animations with scroll triggers and handle multiple instances of the same element on a page.

Takeaways

• 😀 The Gap and Scroll Trigger are powerful tools for creating advanced interactions in Webflow.
• 📚 To get started, you need to add the Gap and Scroll Trigger libraries to your Webflow project through the site settings or before the closing body tag.
• 🔗 Visit gap.com to install the libraries and get the CDN links for Scroll Trigger.
• 💻 Use a tool like Code Sandbox to write and update your code without needing to republish your site.
• 🖌️ Gap allows you to animate elements by passing in properties such as scale, opacity, and transform within the brackets.
• 🔄 The 'from' animation in Gap animates elements from a specified state back to their original Webflow state.
• 🕒 Gap has a default duration of 0.5 seconds for animations, but this can be customized to any desired length.
• 📏 The 'gap.set' function instantly sets an element's style without animation, useful for setting initial states.
• 🔄 Ease types in Gap define the speed curve of the animation, and you can customize these for different effects.
• 🎨 Gap enables easy creation of stagger animations, which can be controlled by the 'stagger' parameter.
• 📊 The 'amount' parameter in stagger animations helps manage the start times distribution for a dynamic number of items.
• 📈 Gap timelines allow for sequencing of animations and can be controlled with various methods such as pause, play, and reverse.
• 🔄 The 'yo-yo' property in Gap timelines makes an animation play forwards and then backwards, useful for infinite loops.
• 🔍 Scroll Trigger settings let you define when an animation should start and end based on the scroll position of specific elements on the page.
• 🔄 The 'toggle actions' in Scroll Trigger provide granular control over what happens when a section enters and leaves the viewport.
• 🔄 For multiple instances of a section on a single page, use a jQuery each loop to ensure each section triggers its own animations.

Q & A

What are the two main tools discussed in the script for creating advanced interactions in Webflow?

The two main tools discussed are Gap and Scroll Trigger.

How can one add the Gap and Scroll Trigger libraries to a Webflow project?

You can add the Gap and Scroll Trigger libraries by going to page or site settings and adding the CDN links provided by visiting gap.com and checking the Scroll Trigger option.

What is Code Sandbox and how is it used in the context of this script?

Code Sandbox is a tool for writing and updating code without needing to republish the site. It is used to create a new file, script.js, where the animation code is written and then linked to the Webflow project.

How do you animate thumbnail images using Gap in the script?

To animate thumbnail images, you type 'gap.2' inside the parentheses, add the class name, and then pass in properties like 'scale: 0' to animate the images to a scale of zero from their original scale in Webflow.

What is the default duration for animations in Gap if not specified?

The default duration for animations in Gap is 0.5 seconds.

How can you change the animation type to a 'from' animation in Gap?

To change the animation type to a 'from' animation, you specify the type as 'from' and set the initial state of the animation, such as animating from a scale of zero back to the original scale in Webflow.

What does the 'gap.set' function do in the script?

The 'gap.set' function instantly sets the style of an element without needing to use a duration, effectively applying the style immediately on page load.

How can you create a stagger animation with Gap?

To create a stagger animation, you add 'stagger' inside squiggly brackets with a specified duration, such as 'each 0.5s', to stagger the start times of the animations.

What is a Gap timeline and how is it used to sequence animations?

A Gap timeline is a sequence of animations that are executed in a specific order. It is created using 'gap.timeline' and steps are added to the timeline to control the order of animations.

How can you control a Gap timeline using the console in the browser?

You can control a Gap timeline using methods like '.pause()', '.play()', '.reverse()', and '.timeScale()' by accessing the console in the browser and applying these methods to the timeline.

What is the purpose of the 'scroll trigger' in the script?

The 'scroll trigger' is used to initiate animations only after certain sections of the page are scrolled into view, providing control over when and how animations are triggered.

How can you ensure that each section of a page triggers its own animations?

You can use a jQuery each loop to iterate through all instances of a section on the page, setting each section as its own trigger for its child elements.