GSAP & ScrollTrigger Crash Course for Webflow
Summary
TLDRThis 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
🌐 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.
🎬 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.
📚 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.
🔄 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.
Mindmap
Keywords
💡Gap
💡Scroll Trigger
💡Code Sandbox
💡Thumbnail Images
💡Animation Properties
💡Easing
💡Stagger Animations
💡Timeline
💡Looping
💡jQuery
💡Callbacks
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
関連動画をさらに表示
Hover Effect That Will Catch Your Eye | Wix Studio #wixstudio #webdesign
How to Create Map Animation like Dhruv Rathee | Vox | Johnny Harris in Geo Layers 3 Part 2 | EZEdit
Level Up Animation With Master CSS
Create an Animated Scene with HTML and CSS: Adding a Tree and Moving Clouds
Animate nav on scroll - CSS-only & easy to customize
We can now transition to and from display: none
5.0 / 5 (0 votes)