The Classic ScrollTrigger Animation That Always Impresses

Summary

This 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

00:00

🚀 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.

05:01

🎨 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.

Keywords

💡Scroll Animation

Scroll animation refers to the visual effects that occur as a user scrolls through a webpage. In the context of the video, scroll animation is the main focus, where dynamic 3D style animations are triggered as the user scrolls. The script describes creating a scroll animation using HTML, CSS, GSAP, and Scroll Trigger, which are technologies used to implement these effects. The video aims to demonstrate how to replicate a popular scroll animation where cards are pinned and animate as the user scrolls.

💡GSAP

GSAP, or GreenSock Animation Platform, is a JavaScript library for creating high-performance, professional-grade animations. In the video, GSAP is used in conjunction with Scroll Trigger to animate the scaling of images as the user scrolls. GSAP is highlighted as a crucial tool for achieving smooth transformations and dynamic effects, illustrating its importance in web animation.

💡Scroll Trigger

Scroll Trigger is a plugin that works with GSAP to create scroll-based animations and interactions. The script mentions using Scroll Trigger to pin sections of the webpage and to trigger animations based on scroll position. It is integral to the video's demonstration, as it enables the creation of the cool 3D style scroll animation effect that the tutorial aims to replicate.

💡Sticky Position

CSS sticky positioning is a technique that fixes an element in place based on the user's scroll position. The video script explains using sticky position to create a simple version of the scroll animation, where certain elements like cards remain fixed in place as the user scrolls, contributing to the dynamic feel of the webpage.

💡Pinned Sections

Pinned sections are parts of a webpage that remain fixed in view as the user scrolls past them. In the script, pinned sections are created by adding a class and using Scroll Trigger to ensure they stay at the top of the viewport. These sections are key to the tutorial's demonstration, as they are the areas that will have the scroll-triggered animations applied.

💡Viewport

The viewport refers to the visible area of a web page that a user sees on their screen at any given time. The script discusses setting elements to take up the full viewport width and height, which is essential for creating an immersive scroll animation experience. Understanding the viewport is crucial for designing responsive and engaging scroll animations.

💡Object Fit

Object fit is a CSS property that determines how an image is resized to fit its container. In the video script, object fit is set to 'cover' to ensure images fill their containers completely while maintaining their aspect ratios. This property is important for creating a polished look in the scroll animation, where images need to look sharp and fit perfectly within their designated areas.

💡CSS Flexbox

CSS Flexbox is a layout mode that makes it easy to design flexible responsive layout structures. The script mentions using Flexbox to center the footer both horizontally and vertically. Flexbox is highlighted as a tool for creating well-organized and aesthetically pleasing layouts that adapt to different screen sizes, which is essential for the scroll animation's effectiveness.

💡Opacity

Opacity in CSS refers to the transparency level of an element, with 1 being fully opaque and 0 being fully transparent. The video script describes using Scroll Trigger to animate the opacity of the hero section's headline, creating a fading effect as the user scrolls. This use of opacity adds to the interactive storytelling aspect of the scroll animation, drawing the user's attention and enhancing the overall experience.

💡GSAP fromTo Method

GSAP's fromTo method is used to animate an element from one state to another. In the script, fromTo is used to scale images down as the user scrolls, creating a dynamic scaling effect. This method is crucial for the tutorial, as it ties the animation directly to the scroll position, providing a smooth and engaging visual transition.

💡Hero Section

A hero section is a prominent area at the top of a webpage, often used to make a strong first impression. In the video script, the hero section contains an H1 tag with large text that fades as the user scrolls, enhancing the storytelling aspect of the page. The hero section is a key element in the scroll animation, setting the tone for the rest of the page's content and animation.

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]