The Classic ScrollTrigger Animation That Always Impresses
Summary
TLDRThis tutorial showcases how to create a dynamic 3D scroll animation using HTML, CSS, GSAP, and ScrollTrigger. It guides viewers through building a website with pinned and animating cards as you scroll. Key steps include setting up sections, applying CSS for layout and design, and using GSAP for smooth scaling animations. The video also demonstrates how to use ScrollTrigger for sticky sections and fading effects, enhancing user interaction and storytelling on the web page.
Takeaways
- 😀 The video aims to teach viewers how to create a scroll animation with pinned and dynamic 3D style cards.
- 🔧 Key tools used in the tutorial include HTML, CSS, GSAP (GreenSock Animation Platform), and Scroll Trigger.
- 💼 The tutorial begins by setting up a basic HTML structure with a logo, sections for content, and a footer.
- 📱 CSS is used to style the elements, including full viewport sections, centered text, and absolute positioning for images.
- 🎨 GSAP is introduced to animate the scaling of images as the user scrolls, creating a smooth and engaging visual effect.
- 🔗 Scroll Trigger is used to pin sections at the top of the viewport and to trigger animations based on scroll position.
- 📊 The tutorial demonstrates how to calculate the end point for scaling animations to synchronize with the scroll.
- 📈 A for each loop is utilized to iterate through each pinned section for animation purposes.
- 🌟 The hero section's headline fades out as the user scrolls, enhancing the storytelling aspect of the page.
- 🎞️ The video concludes with a recap of the steps and a prompt for viewers to like and subscribe for more content.
Q & A
What is the main topic of the video script?
-The main topic of the video script is creating a scroll animation with pinned and dynamic 3D style cards as you scroll, using HTML, CSS, GSAP, and ScrollTrigger.
Why is ScrollTrigger considered an ideal choice for this animation?
-ScrollTrigger is considered ideal for this animation because it allows for smooth transformations and ensures that the animations are tied to the scroll position, creating a fluid and continuous effect.
What is the first step in creating the scroll animation according to the script?
-The first step is to create a container and add a logo that acts as a link.
How many sections are needed to create the sticky images in the animation?
-The script suggests creating separate sections for the sticky images, duplicating the section with the class 'card' multiple times based on the number of images desired.
What class name is added to the sections that need to be pinned using ScrollTrigger?
-The class name 'pinned' is added to the sections that need to be pinned using ScrollTrigger.
How is the footer section styled in the animation?
-The footer section is styled to be half the viewport height, centered using Flexbox both horizontally and vertically, and features a large, legible font.
What role do the footer and the last card play in the animation sequence?
-The footer and the last card marked with the class 'scroll' play key roles in the animation sequence, as they are used to determine the end point of the animation and ensure a smooth transition.
How is the scaling animation of the image calculated?
-The scaling animation of the image is calculated by measuring the distance between the top of the next section and the top of the current section, then appending this value to the top property.
What property is used to make the sections stick at the top of the viewport as you scroll?
-The 'pin' property is used with a value of true to make the sections stick at the top of the viewport as you scroll.
How is the opacity of the headline in the hero section animated?
-The opacity of the headline in the hero section is animated by creating a new ScrollTrigger that monitors the entire body of the document, with the opacity starting at one (fully visible) and gradually fading to zero as the user scrolls.
Outlines
🚀 Introduction to Creating Scroll Animations
The speaker begins by mentioning a request from a pro member to create a scroll animation. They explore a website showcasing a popular scroll animation where cards are pinned and animated in a dynamic 3D style as the user scrolls. The tutorial aims to replicate this effect using HTML, CSS, GSAP, and Scroll Trigger. The speaker briefly explains that a simple version can be achieved with CSS sticky position but for smooth transformations, Scroll Trigger is recommended. They encourage viewers to like and subscribe if they find the content helpful. The tutorial then starts with creating a container, adding a logo link, sections for a hero section, sticky images, and a footer. The sections for sticky images are given a 'card' class, and an image wrapper with an image element is added. The sections that need to be pinned using Scroll Trigger are given a 'pinned' class, while the last section is given a 'scroll' class to ensure it scrolls normally. The video ends with a setup for styling and scripting.
🎨 Crafting the Scroll Animation with Code
The second paragraph delves into the coding process for the scroll animation. It starts with resetting default margins and padding, setting box-sizing to border-box, and applying a font-family and background color. The images are styled to fill their containers and maintain aspect ratios. The container spans the full viewport, and the logo is positioned at the top center with padding and a high z-index. Each section is designed to take up the full viewport, with the hero section's H1 centrally placed and styled with a large font size and white color. The 'scroll' class is used to allow natural page scrolling, and the image container is positioned at the center within each card section. The footer is styled using Flexbox and is centered both horizontally and vertically. The script starts by registering the Scroll Trigger plugin with GSAP and setting up an event listener for the document load. It then focuses on the sections marked with the 'pinned' class for scroll trigger animations. A for-each loop is used to iterate through each pinned section, targeting the image within the section. The script calculates the end point for the scaling animation by measuring the distance between sections. Each section is configured to stick at the top of the viewport as the user scrolls. The images within each section are animated to scale down as the user scrolls, using GSAP's from method tied to the scroll position through Scroll Trigger. Lastly, a fading effect is added to the hero section's headline, with a scroll trigger monitoring the entire body of the document and adjusting the opacity based on scroll progress.
Mindmap
Keywords
💡Scroll Animation
💡GSAP
💡Scroll Trigger
💡Sticky Position
💡Pinned Sections
💡Viewport
💡Object Fit
💡CSS Flexbox
💡Opacity
💡GSAP fromTo Method
💡Hero Section
Highlights
Introduction to creating a scroll animation with pinned and dynamic 3D style cards as you scroll.
Using HTML, CSS, GSAP, and Scroll Trigger to replicate the scroll animation.
Explaining the use of CSS sticky position for a simple version of the animation.
Setting up the HTML structure with a container, logo, sections, and footer.
Adding class names for sections to be pinned using Scroll Trigger.
Styling the sections to fill the viewport and maintain aspect ratios.
Positioning the logo and link at the top center of the page.
Creating a hero section with a centrally placed H1.
Setting up the card sections with image wrappers for the sticky images.
Configuring the footer to be half the viewport size and centered.
Registering the Scroll Trigger plugin with GSAP.
Setting up an event listener for the document load to ensure elements are accessible.
Iterating through each pinned section to target and manipulate images on scroll.
Calculating the end point for the scaling animation of the image.
Initializing Scroll Trigger for each section to create the sticky effect.
Animating the images to scale down as the user scrolls.
Adding a fading effect to the hero section's headline based on scroll progress.
Finalizing the interactive storytelling effect with smooth opacity transitions.
Transcripts
just yesterday a pro member reached out
with a request on how to create a scroll
animation when I explored this website I
discovered a standout scroll animation
where cards are pinned and animate in a
dynamic 3D style as you scroll this
effect has become very popular and since
we hadn't covered it on our Channel it
seemed like the perfect opportunity to
demonstrate how to replicate this scroll
animation using HTML CSS gsap and scroll
trigger while a simple version of this
can be created using CSS sticky position
achieving that cool skill ta animation
and ensuring the Transformations are
smooth made scroll trigger and ideal
choice if you find these videos helpful
please leave a like and might subscribe
as well if you haven't yet all right
without wasting any more time let's dive
into the code let's start by creating a
container first of all We'll add a logo
which is going to be a
link next up we need a few sections
we'll start by adding a hero section it
will contain only an H1 with some text
next we need those sticky images so we
are going to create separate sections
for that I light another section and
give it a class name of card I'll add an
image wrapper and put an image element
inside
it let's duplicate this section A few
more times based on the number of stick
images you
want finally I'll add one last section
for the footer it will contain an H1
now here comes the crucial step
whichever sections we want to pin using
scroll trigger I'll add another class
name of pinned to those
[Music]
sections except the last one it will
have a class name of scroll because we
are not pinning the last image and it
should scroll regularly that's pretty
much it let's get to styling first up
we'll reset the default margin padding
and set the Box sizing to border box for
all
elements for the HTML and body we set
both width and height 100% apply a font
family and set the background color to
[Music]
black images in our sections will fill
their containers completely and maintain
their aspect ratios by setting object
fit to cover next the container that
wraps everything also spans the full
width and height of the
viewport our logo positioned absolutely
at the top center of the page has some
padding and a high index to ensure it
stays on
top the link in the logo has no text
decoration a white color and is slightly
larger at 24 pixels
each section is designed to take up the
full viewport with a width of 100
viewport width and a height of 100
viewport
height in the hero section the H1 is
centrally placed both horizontally and
vertically with a massive font size of
200 pixels white color and slightly
negative letter spacing
the card with the class scroll is
positioned relatively to allow natural
page scrolling the image container
inside each card section is also
absolutely positioned at the center with
specific dimensions to maintain its
prominence on the page
lastly our footer is half the viewport
side centered using Flex box both
horizontally and vertically and styled
with a large legible
font that wraps up our CSS we kick
things off by registering the scroll
trigger plug-in with gap next we set up
an event listener that waits for the
entire document to be loaded before
running our script this ensures that our
HTML elements are fully loaded and
accessible we start by selecting the
footer and the last card marked with the
class scroll these elements play key
roles in our animation
sequence we also gather all sections
that have the class pinned into array
these are the sections that we'll be
focusing on for our scroll trigger
animations first we use for each Loop to
iterate through each pin
section initially we grab the image
within the section using FY selector
this allows us to specifically Target
and manipulate the image as the user
Scrolls next we determine the next
section our script should reference once
the current one is done if the current
section isn't the last V set next
section to the subsequent one otherwise
we default to the last card ensuring our
animation has reached the end point to
create a fluid and continuous animation
we calculate the end point for the
scaling animation of the image we
achieve this by setting and scale point
this involves measuring the distance
between the top of the next section and
the top of the current section then
appending this value to the top property
this calculation ensures that our
animation aligns perfectly with the
natural flow of the web page as it
Scrolls next we configure each section
to stick at the top of the viewport as
you scroll using gaps 2 method we
initialize a scroll trigger for each
section the trigger for this animation
is the section itself starting when the
top of the section hits the viewport top
the sticky effect is maintained until
the section reaches a dynamic end point
if it's the last pin section this point
extends by half the height of the last
card otherwise it ends just before the
footer becomes visible ensuring a mo
transition we enable pinning with pin
set to true and set pin spacing false
the scrub property is adjusted to one
allowing the animation to progress
smoothly in syn with your
scroll next we animate the images within
each section making them scale down as
the user Scrolls we start with the
images at full size scale of one and
animate them to half their size scale
of5 we achieve this using GPS from two
method where the scaling is tied to the
scroll position through scroll trigger
the trigger is the current section with
the animation starting when the section
reaches the top of the viewport and
ending at the predefined end scale
[Music]
point the scrub parameter is again set
to
[Music]
one lastly we add a fading effect to the
hero sections headline first we select
the H1 element within the hero
section we then create a new scroll
trigger that monitors the entire body of
the document the animation starts right
at the top of the page and continues as
the page Scrolls down through four times
the viewport
[Music]
height we use the scrub parameter set to
one to ensure the opacity trans trans of
the headline is smooth and directly tied
to the scroll position in the on update
function we dynamically adjust the
opacity based on the scroll progress the
opacity starts at one fully visible and
gradually Fades to zero as the user
Scrolls enhancing the interactive
storytelling of the
page that's pretty much it hope you
found the video helpful see you in the
next one
[Music]
浏览更多相关视频
Create This EPIC Landing Page Reveal Animation In Minutes (GSAP)
I Built JavaScript-Powered Minimap Scroll Animation
Framer Tutorial: Smooth Scrolling Links with Scroll Targets
Animate nav on scroll - CSS-only & easy to customize
Introduction to HTML | An HTML5 Tutorial for Beginners
Learn Webflow in 16 Minutes (Crash Course)
5.0 / 5 (0 votes)