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.

Outlines

00:00

🌐 Introduction to Gap and Scroll Trigger in Webflow

This paragraph introduces the powerful tools Gap and Scroll Trigger for creating advanced interactions in Webflow. The speaker explains how to add these libraries to a Webflow project by installing them from gap.com and copying the CDN links to the project's before closing body tag. The use of Code Sandbox is highlighted as a tool for writing and updating code without republishing the site. The first task is to animate thumbnail images using Gap, demonstrating how to apply animations with different properties, durations, and easing types. The paragraph also covers the creation of stagger animations and the use of Gap.set for instant style changes.

05:01

🎬 Advanced Animation Techniques with Gap

The speaker delves deeper into advanced animation techniques using Gap, focusing on animating other elements like title wraps and hero images. The paragraph explains how to create sequences in animations using Gap.timeline, which allows for the control of animation order and timing. Techniques such as using position parameters to offset animations and creating looping animations with Gap.timeline are discussed. The paragraph also covers the use of callbacks and methods like pause, play, and reverse to control timelines, providing examples of how these can be implemented in Webflow projects.

10:02

📚 Scroll Trigger Setup and Animation Control

This paragraph discusses the setup and control of animations using Scroll Trigger. The speaker explains how to create timelines that animate elements based on scroll position, using the trigger element and start/end points to define when animations should begin and end. The use of percentage-based points and the scrub parameter for smooth animation synchronization with scrolling is highlighted. The paragraph also covers the use of toggle actions to play, pause, resume, reset, restart, or reverse animations based on the section's visibility. Techniques for handling multiple sections on a single page and ensuring each section triggers its own animations are also discussed.

15:02

🔄 Individual Section Triggers with jQuery Each Loop

The final paragraph addresses the issue of multiple sections on a single page triggering animations simultaneously. The speaker introduces a solution using a jQuery each loop to ensure that each section triggers its own images independently. The paragraph explains how to loop through all about sections on the site and create a timeline for each section, animating only the child images within the current section. This approach ensures that animations are controlled at an individual section level, providing a more refined user experience and precise control over animations in Webflow projects.

Keywords

💡Gap

Gap is a powerful animation library used in web development, specifically within Webflow. It allows developers to create advanced interactions and animations for web elements. In the video, Gap is used to animate thumbnail images, titles, and other elements by applying properties like scale, opacity, and transform. It is integral to the theme of creating dynamic and responsive web animations.

💡Scroll Trigger

Scroll Trigger is a feature that enables animations to be triggered based on the user's scroll position. It is used in conjunction with Gap to create interactive and engaging user experiences. The script mentions adding Scroll Trigger settings to timelines, which control when animations start based on the visibility of certain sections of the webpage.

💡Code Sandbox

Code Sandbox is an online code editor that allows developers to write and test code without needing to republish their site. In the context of the video, Code Sandbox is used to write JavaScript code for animations, which is then linked to the Webflow project. This tool facilitates the development process by providing a live preview of changes.

💡Thumbnail Images

Thumbnail images are smaller, clickable versions of larger images used on websites. In the video, the script demonstrates how to animate these images using Gap, changing their scale and opacity to create a visually appealing effect. This is an example of how Gap can be used to enhance the user interface.

💡Animation Properties

Animation properties refer to the specific attributes that can be animated, such as scale, opacity, and transform. The video script discusses how to use Gap to animate these properties, providing examples of how they can be manipulated to create different effects, such as scaling images up or down or changing their opacity.

💡Easing

Easing in animation refers to the rate of change of a parameter over time. It defines how an animation starts and ends, making it appear more natural. The script mentions 'power one out' as an example of an easing type, which can be adjusted to create smoother transitions in animations.

💡Stagger Animations

Stagger animations are a technique where multiple elements are animated sequentially, creating a sense of depth and order. In the video, Gap is used to stagger the start times of image animations, which helps in managing the visual flow and preventing elements from appearing simultaneously, thus enhancing the overall aesthetic.

💡Timeline

A timeline in animation is a sequence of events or steps that define the order and duration of animations. The video script discusses creating timelines using Gap, which allows for the orchestration of multiple animations in a specific sequence. This is crucial for creating complex animations that require synchronization.

💡Looping

Looping in animation refers to the repetition of an animation sequence. The video demonstrates how to set up a looping timeline using Gap, which can repeat an animation multiple times or indefinitely. This is useful for creating continuous effects, such as a background element that continuously moves.

💡jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It simplifies HTML document traversing, event handling, and animation. In the video, jQuery is mentioned as a tool to loop through multiple sections on a page, allowing each section to trigger its own animations independently, which is essential for handling dynamic content.

💡Callbacks

Callbacks in programming are functions that are to be executed after certain events occur. In the context of the video, callbacks like 'onComplete' are used with Gap timelines to trigger actions when an animation step is completed. This provides a way to control the flow of animations and add interactivity.

Highlights

Introduction to Gap and Scroll Trigger as powerful tools for creating advanced interactions in Webflow.

Instructions on adding Gap and Scroll Trigger libraries to a Webflow project via page or site settings.

Explanation of how to install and use the CDN for Gap and Scroll Trigger.

Use of Code Sandbox for writing and updating code without republishing the site.

Demonstration of animating thumbnail images using Gap with a 'from' animation type.

Adjusting animation duration and type to create different visual effects.

Utilizing 'gap.set' to instantly style elements without animation duration.

Animating multiple properties and handling properties with special naming conventions in Gap.

Creating fade and border radius animations with a custom duration.

Customizing ease types for animations in Gap and adding them to projects.

Creating stagger animations to delay the start of each animated element.

Using 'amount' to distribute start times for a dynamic number of animating items.

Animating other elements like title wraps and hero images with Gap from animations.

Introducing Gap timelines for sequencing animations and controlling their order.

Using position parameters to adjust the start time of animations within a timeline.

Creating looping animations with Gap timelines and controlling them with various methods.

Controlling timelines through console methods like pause, play, and reverse.

Setting up Scroll Trigger to animate elements based on scroll position.

Configuring Scroll Trigger settings like trigger element, start and end points, and markers.

Using percentage-based points and toggle actions for fine-tuned Scroll Trigger control.

Implementing granular control over animations at the entry and exit of scroll view.

Addressing the issue of multiple section triggers on a single page with jQuery each loop.

Final setup recommendations for Scroll Trigger to ensure smooth and controlled animations.

Invitation to learn more about advanced Gap libraries through the provided Patreon link.

Transcripts

Gap and scroll trigger are by far the

most powerful tools we have for creating

Advanced interactions in webflow in this

lesson we'll recreate these interactions

and cover everything you need to know

starting with the absolute Basics first

let's add the Gap and scroll trigger

libraries to our web flow project this

can go in page or site settings in the

before closing body tag let's go to

gap.com install here we'll click on the

CDN Tab and check scroll trigger this

gives us the GSA and scroll trigger

links that we can copy and add to

webflow we'll be using a tool called

code sandbox to write our code so we can

update it without having to republish

our site let's copy the first line add

it below the others and we'll replace

this URL with a link to our code sandbox

file create a free account on codes

sandbox. click create a Sandbox HTML CSS

and create sandbox from here we'll

create a new file using this icon and

we'll call this

script.js let's copy the link to our

code sandbox and in webflow we'll paste

it in and Target our script.js file

let's save and publish our site the

first thing we'll animate are these

thumbnail images let's copy their class

and head to code sandbox we'll close

this preview window and close the side

panel to animate with gap let's type

gap. 2 inside the parentheses We'll add

quotes period and paste our class Name

by behind the quotes we'll add a comma

and squiggly brackets inside these

brackets we can pass in any properties

we want to animate I'll pass in scale

colon Z here we're animating all our

thumbnail images to a scale of Zero from

whatever the scale was in web flow so if

we save that notice how all our images

animate to scale zero if we don't pass

in a duration the default duration in

gap is 0.5 seconds let's change that to

2 seconds we can also change change our

type of Animation to a from animation

here our images will animate from a

scale of zero back to whatever the scale

was in webflow so if we refresh notice

our images animate up from a scale of

zero we can also do a from to animation

and this allows us to set the initial

State We'll add squiggly brackets and a

comma and here we won't pass a duration

just the property so we'll animate from

a scale of two to a scale of zero over a

duration of 2 seconds and if we save

this notice our images start really

large and scale down to zero and the

last thing we can use is a gap. set this

instantly sets the image to a certain

style without needing to use a duration

so they'll instantly be a scale of zero

on page load using a gap. set we can

also add multiple properties in

whichever order we'd like let's animate

with a gap. from from an opacity of zero

and from a border radius of three rim

for any property that uses two words

we'll delete the dash and capitalize the

second word if we use a number this

would be three pixels but for a certain

unit we'll wrap it in quotes and we can

add three Rim I'll have this happen over

a duration of 1 second and if we save

with command s refresh our site these

Fade up and the Border radius opens all

animations in gap have a default ease of

power one out I'll leave a link to this

ease visualizer in the description below

each number is getting progressively

stronger and we can change the EAS type

here and copy it into our project we can

add it anywhere inside the squiggly

brackets like so to apply a different

ease one of the coolest Parts about Gap

is its ability to easily create stagger

animations let's animate all our images

from a scale of zero and we'll stagger

their start times We'll add stagger open

en Clos squiggly brackets and add a

comma inside the brackets we can pass in

each 0.5 5 this will put 0.5 seconds in

between the start time of each image so

our total duration is going to be 2.5

seconds and the more images we add the

longer our animation will become instead

of each we can also use amount this will

distribute the start times of the images

across 0.5 seconds so no matter how many

images we add our total duration will

never be longer than 1.5 seconds amount

is great when we have a dynamic number

of items we're animating if we save this

and refresh our site we should notice

they all kind of scale up and they're

staggering from the first one in the

list all the way to the end we can also

customize where they stagger from though

right after amount we'll add comma from

and in quotes we'll pass in from the end

of the list so if we save that and

refresh it'll start at the end and

stagger back to the beginning we can

also do sensor so it'll stagger from the

middle item or random so every time we

refresh the page it'll stagger in a

random order next let's grab a couple

other elements to animate like this

title wrap we can copy its class and

create a new line in our code we'll do a

gap. from on our title wrap from an

opacity of zero and from a y transform

of six Rim so it's pushed down and it'll

slide up this can happen over a duration

of 1 second let's also grab this large

image here our hero image we'll copy

that class and do a gap got from on the

hero image animate it from an opacity of

zero and from a scale of 0.8 this can

happen over a duration of 2 seconds so

if we save that we should notice now our

title sliding up and this image scaling

up but these are all happening at the

same time we might want to create some

kind of a sequence to our animation so

let's come back here and we'll create a

gap timeline so we'll say let to create

our timeline and we can name it whatever

we'd like I'll call this load TL for

load timeline we'll set it equal to gap.

timeline and then to add these steps to

our timeline all we need to do is

replace Gap with the name of our

timeline this will happen in the order

we laid out here so the Second Step will

only start animating after the first

step is completely finished if we save

that and refresh the title comes in then

the images than this large image but we

might want them to slightly overlap each

other so to do that we can use a

position parameter let's add a comma

after the squiggly bracket and we can

pass in a number I'll say5 seconds so

this step will happen now 05 seconds

from the start of the entire timeline

this acts kind of like position absolute

we're just absolu it to the beginning of

the whole timeline and offsetting it by

0.5 seconds but we can use a relative

position parameter by wrapping this in

quotes using a less than sign and here

we're saying let this step start at the

beginning of the previous step but we

might want to offset that a little so

we'll say at the beginning of the

previous step plus5 seconds we can also

use a greater than sign to say let this

step start at the end of the previous

step which is what it would normally do

but then we can say minus5 seconds so it

cuts half a second into the previous

step for now we'll just have it start at

the beginning plus5 and if we save that

and we come back here now we should

notice while these are still animating

this image starts to come in next let's

create a new timeline we'll call this

Loop TL and set it equal to gap.

timeline we'll say Loop TL do2 on our

hero image let's animate this image to a

y of -1 rim and over a duration of 1

second and with an ease of power one in

out so we're easing the start and end

now in our timeline we can add squiggly

brackets to open the settings let's pass

in repeat four so our timeline repeats

four times if we save and refresh we

should notice this image sliding up and

then it just keeps restarting until the

four times is over to make this feel

more smooth though we might need to

slide our image back down to zero before

repeating or another way we could handle

this is in our timeline settings we can

pass in yo-yo true which means it will

play forwards and then backwards and we

can change repeat to negative 1 so it

repeats infinite number of times if we

save and refresh our image should start

sliding up and down smoothly and that

should just keep repeating let's right

click on our page and click inspect and

click on console for any timeline

there's different methods we can use to

control it let's grab our Loop TL and

do. pause hit enter and it pauses the

timeline I'll hit my up Arrow key change

this to playay and it resumes the

timeline we can also do reverse this

means on click or hover of a link we

could play pause or reverse our timeline

giving us a lot of control this is one

of the greatest things things about

timeline and we can also do time scale

and one would be its default speed three

would be three times the original speed

so we can speed it up while it's playing

there's all different methods we can use

on a timeline but here we might want our

timeline to only start after the image

is fully scaled up to do that we can

pass in pause to true so the timeline is

paused on page load and then for this

step here we can pass in a call back

I'll do on complete that means when this

step is completed we can do Loop TL

doplay so we'll play our timeline only

after this step is completed there's all

different callbacks we can use like on

start on reverse reverse complete so

definitely look into those callbacks

here but the great thing about this is

this looping timeline will only start

after the image is fully scaled this is

great for things like page loaders or

different things where we may only want

the hero to animate after this preloader

is finished next let's animate this

final section here we have a bunch of

images stacked on top each other let's

copy their class and head to our code

we'll create a new timeline called

scroll TL set to gap. timeline and we'll

add a step to this timeline scroll TL

from on our about images we animate them

from opacity 0 from a scale of 0.8 over

a duration of

0.15 and we'll add a stagger to offset

the starts of each of them by

0.4 so once we save that if we refresh

here we should notice these images start

to come in but they started before we

were scrolled into view so we need to

make sure these only animate after we're

scrolled into view of this about section

so to do that let's open our timeline

settings and I'll hit enter and pass in

scroll trigger scroll trigger accepts

its own settings the first being the

trigger element in our case it's the

about section and the start Point it'll

be when the top of that section reaches

Center of screen for us the end point

will be whenever the bottom of section

reaches bottom of screen and we can also

pass in markers true just so we get a

visual preview of these two points while

we're building I'll also add scrub true

so while we're scrolling past these

we'll be scrubbing the timeline with our

scroll bar so if we save that and

refresh notice we have these nice

markers now and whenever the top of this

section reaches Center of screen we're

starting to scrub our timeline and

whenever the bottom of that section

reaches bottom of screen our timeline is

over now we can also pass in percentage

based points instead of keywords like

top Center bottom we could say when 10%

from the top of the section reaches 40%

from the top of the screen and if we

save and refresh now we'll notice that

this start point is 40% from top of

screen and this start point is 10% from

the top of the section let's change our

trigger points to start when top of

section reaches 40% from Top top of

screen and ends when bottom of section

reaches 50% from top of screen instead

of scrub true we could also add a number

here that means if we abruptly stop

scrolling it'll take about 2 seconds for

the animation to catch up to our scroll

bar the higher the number the more

smooth this can feel instead of scrub we

could also add toggle actions this means

when we scroll into view of our section

our animation will play at this duration

instead of scrubbing it for toggle

actions there's four points we can

consider the keywords we can use for

those are play pause resume reset

restart complete reverse and none so if

we were to check out those four points

the first is when the top of section

enters View and the second point is when

the bottom of section leaves view the

third point is when the bottom of

section re-enters View and then the

fourth point is when the top of section

exits out so if we were to take that

into consideration let's say when the

section enters view will play when it

leaves from the bottom we will pause

when it re-enters through the end we

will resume and when it exits out past

the top we will reverse so if we were to

save that and refresh we should notice

now whenever we enter it plays exit past

the bottom it would pause re-enter it

resumes and then exit past the top it

reverses so we get really granular

control of what we want to happen at

these four points the setup I usually

like to use is start whenever the top of

section reaches bottom of screen so it's

just peeking in at the bottom and ends

whenever the top of section reaches

whatever percent offset I want from top

of screen maybe like 70% from top of

screen and we'll just take a look at

what those four points will look like so

if we were to save this and refresh here

we'll notice our start point is when top

of section reaches bottom of screen and

for that we'll do nothing our endpoint

is when the top of section exits past

that 70% from top of screen and for that

we'll play our animation the next point

is when the top of section re-enters

here and for that we do nothing and the

last point is when the top of section

goes out and it's completely out of view

and for that I'd usually reset the

animation so it's ready to play again

when we come back in So to see that in

action when it enters out the bottom do

nothing when it crosses that thres hole

70% from top we'll play when it

re-enters past that 70% do nothing and

then when it goes out past the bottom of

screen we will reset the animation

completely so if we save that and

refresh now we'll see that it's

completely hidden until we reach that

70% Mark when we cross back past the 70%

Mark we're not seeing it reverse yet

it's just waiting and it doesn't clear

out till the sections completely out of

view and then it's ready to be played

again the last thing to consider is what

happen happens if we have multiple

copies of this about section on a single

page whenever that happens the first

section acts as a trigger triggering all

of the images instead we want each

section to trigger its own images to do

that I like to use a jQuery each Loop

I'll Loop through all of the about

sections on the site and we can do do

each and I'll open up parentheses create

a function open this squiggly brackets

and I'll move all this timeline code

inside my each Loop so now for my

trigger element I can replace this with

the keyword this which just refers back

to the section I'm looping through and

instead of animating all about images I

can grab this section and find only the

child about images inside of the current

section I'm looping through when I save

that and I refresh it treats each

section as its own trigger so when this

section comes into view the images

inside it play and when the second

section comes to view the images inside

that play if you'd like to learn more

about scroll trigger and other Advanced

Gap libraries check out my Patron in the

description below