Hi, I’m an old fish from the front end lab!

Learn how to create amazing scrolling animations with minimal code

Before we talk about ScrollTrigger, let’s take a quick look at GSAP.

The GreenSock Animation platform (GSAP) animates anything that JavaScript can manipulate (CSS properties, SVG, React, canvas, generic objects, etc.) and solves compatibility issues across browsers 20 times faster than jQuery. About 10 million websites and many major brands use GSAP.

Next, Old Fish will lead you to learn how to use the ScrollTrigger plug-in.

Plug-in profile

ScrollTrigger is based on GSAP implementation of a high-performance page scrolling trigger HTML element animation plug-in.

Create amazing scrolling animations with minimal code via ScrollTrigger. We need to know that ScrollTrigger is a plug-in based on GSAP implementation, ScrollTrigger is to process the rolling event, and the real processing animation is GSAP, the combination of the two can achieve the rolling animation ~

Plug-in features

  • Link any animation to a particular element so that it executes the animation only when the element is displayed in the view.
  • Actions (play, pause, resume, restart, reverse, finish, reset) can be performed on an animation when entering/leaving a defined area or when linking it directly to the scroll bar.
  • Delay synchronization between animation and scroll bar.
  • Captures progress values in the animation based on speed.
  • Embed scrolling directly triggers any GSAP animation (including the timeline) or creates a standalone instance, and do whatever you want with the rich callback system.
  • Advanced fixation allows you to lock an element between certain scroll positions.
  • Flexibility in defining scroll positions.
  • Supports vertical or horizontal scrolling.
  • Rich callback system.
  • When the window is resized, the position is automatically recalculated.
  • Enable visual markers during development to see exactly where the start/end/trigger points are.
  • When the scroll logger is active, as willactiveClass added to the trigger element:toggleClass: "active"
  • Use the matchMedia() standard media query to create different Settings for various screen sizes.
  • Custom scroll trigger container that can define a div and not necessarily a browser viewport.
  • Highly optimized for maximum performance.
  • The plug-in is only about 6.5 KB in size.

Install/reference

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
Copy the code

ES Modules

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
​
gsap.registerPlugin(ScrollTrigger);
Copy the code

UMD/CommonJS

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
​
gsap.registerPlugin(ScrollTrigger);
​
Copy the code

A simple example

gsap.to(".box", {
  scrollTrigger: ".box".// start the animation when ".box" enters the viewport (once)
  x: 500
});
Copy the code

Advanced examples

let tl = gsap.timeline({
    // Add to the entire timeline
    scrollTrigger: {
      trigger: ".container".pin: true.// Fix trigger elements at execution time
      start: "top top".// When the top of the trigger touches the top of the viewport
      end: "+ = 500".// End after scrolling 500 px
      scrub: 1.// Trigger 1 second to follow the scrollbar
      snap: {
        snapTo: "labels".// Capture the most recent tag in the timeline
        duration: {min: 0.2.max: 3}, // Capture animation should be at least 0.2 seconds, but not more than 3 seconds (depending on speed)
        delay: 0.2.// Wait 0.2 seconds from the last scrolling event before capturing
        ease: "power1.inOut" // Capture the elapsed time of animation (default: "power3")}}});// Add animations and labels to the timeline
tl.addLabel("start")
  .from(".box p", {scale: 0.3.rotation:45.autoAlpha: 0})
  .addLabel("color")
  .from(".box", {backgroundColor: "#28a92b"})
  .addLabel("spin")
  .to(".box", {rotation: 360})
  .addLabel("end");
Copy the code

Custom examples

ScrollTrigger.create({ trigger: "#id", start: "top top", endTrigger: "#otherID", end: "bottom 50%+=100px", onToggle: self => console.log("toggled, isActive:", self.isActive), onUpdate: self => { console.log("progress:", self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity()); }});Copy the code

Next, let’s look at usageScrollTriggerWhat kind of effect can be achieved.

ScrollTrigger can achieve a lot of cool effects, there are more examples and source code, quickly go to the public account background reply AAA scroll to learn it! Students are also welcome to discuss with old fish

Through the front door, there was a family

Original is not easy, praise, message, share is old fish to write down the power!