I Attempted The Wildest SOTD Scroll Animation Just To See If I Could (w/ Three.js and ScrollTrigger)

Summary

In this video, the creator shares their journey of recreating an award-winning portfolio using JavaScript, Canvas, 3JS, and ScrollTrigger. The process involves building an animated work section with a grid layout, dynamic 3D text, and interactive elements. The creator explains the step-by-step approach to coding the layout, styling the sections, integrating animations, and achieving smooth, scroll-triggered effects. The tutorial provides valuable insights on managing animations, responsive design, and working with 3D elements in web development, aimed at helping others build similar immersive experiences.

Takeaways

• 😀 The tutorial walks through recreating a dynamic animated portfolio section with 3D elements and scroll-triggered animations using JavaScript and 3.js.
• 😀 The project includes replicating an inspiring award-winning website with a focus on smooth scrolling and interactive animations.
• 😀 The HTML structure involves three main sections: intro, work, and outro, with placeholders for text and images, as well as a card layout for the work section.
• 😀 The CSS focuses on ensuring clean, responsive layout design, including flexbox for centering content and styling cards for visual appeal.
• 😀 JavaScript integration with GSAP and ScrollTrigger is used to create a smooth scroll and animated effects while working with 3D elements using 3.js.
• 😀 The grid canvas is created dynamically and animated based on scroll, using circles as grid elements that shift to create a dynamic, interactive experience.
• 😀 The text elements are animated along paths with a sine wave motion, using 3D coordinates to create engaging text movement that adjusts as the user scrolls.
• 😀 A key part of the animation is the linear interpolation function that ensures smooth transitions between different scroll positions for both the text and card elements.
• 😀 The scroll trigger updates the animation as the user scrolls, allowing text and card containers to move in sync, enhancing the overall experience.
• 😀 To ensure a responsive design, the tutorial emphasizes resizing the grid canvas and adjusting the camera settings on window resize to maintain smooth animations across different screen sizes.

Q & A

What is the main goal of the video?

The main goal of the video is to walk through the process of recreating an impressive animated layout using JavaScript, canvas, 3js, and scroll trigger, with the hope of helping viewers build similar animations.

What inspired the creation of the project shared in the video?

The inspiration for the project came from an award-winning website that the creator had seen and admired. Initially, the creator thought the site was too complex but eventually decided to attempt recreating its design.

What tools and technologies were used to build the project?

The project was built using JavaScript, canvas, 3js, scroll trigger, GSAP, and other tools like Lottie for smooth scrolling and animations.

What does the HTML structure of the project consist of?

The HTML structure consists of three main sections: an intro, a work section, and an outro. The work section has a text container and a card layout, where each card includes an image and copy.

How is the layout styled using CSS?

CSS styling removes default margins and padding, sets a consistent box-sizing model, and uses Flexbox for centering the intro and outro content. For the work section, specific styles are applied to ensure the animations work smoothly with a black background, absolute positioning, and a grid canvas setup.

What role does the 3D perspective and animations play in the design?

The 3D perspective is used to create a sense of depth and to animate text and grid elements in a smooth, dynamic way. The animation of the text elements follows a path generated using sine waves, which are then projected into 3D space for smooth scroll-based motion.

How is the card container animated in this project?

The card container is animated horizontally using the scroll progress. It moves based on the user's scroll, and its movement is controlled through JavaScript with linear interpolation for smooth transitions.

What is the role of the grid canvas in the project?

The grid canvas creates a dynamic, scroll-reactive background that changes based on the user's scroll position. It features small circles drawn on a grid, with their positions shifting as the user scrolls through the page.

What function does GSAP serve in this project?

GSAP is used for animating the movement of elements like the text and card containers. It provides smooth animations and integrates well with scroll-based triggers to ensure a responsive and seamless experience.

How is responsiveness handled in this animation project?

Responsiveness is managed by adjusting canvas size, recalculating positions for text and grid elements, and updating camera settings when the window is resized. This ensures the animation and layout work consistently across different screen sizes.