The Making of: Netlify's Million Devs SVG Animation Site

This article details the creation of Netlify's "Million Devs" microsite, focusing on the animation process. The site uses a large SVG as its foundation, cleverly broken down into manageable Vue components for easier management and manipulation.

Building a Vue App within an SVG

The SVG acts as a coordinate system (think Battleship!), with x, y, width, and height defining elements. The main Vue app contains the header and a single, massive SVG. This SVG is further decomposed into smaller, reusable Vue components:

• Paths: Separate components for desktop and mobile views, controlled by Vuex state.
• Stations: 27 individual station components (plus text labels), along with decorative elements (trees, bushes, etc.), organized by year for better organization.
• "You Are Here" Marker: Conditionally rendered for desktop views and logged-in users.

The flexibility of SVG allows for nested SVGs, defining the x, y, width, and height of each child SVG to precisely position them within the parent. <g></g> elements (similar to HTML divs) group components. A year component example:

<template>
  <g>
    <app-tree x="650" y="5500"></app-tree>
    <app-tree x="700" y="5550"></app-tree>
    <app-bush x="750" y="5600"></app-bush>
    <app-virtual x="1200" xsmall="50" y="6000" ysmall="15100"></app-virtual>
    <app-text num="20" url-slug="jamstack-conf-virtual" x="1400" xsmall="50" y="6500" ysmall="15600">
      <template v-slot:date>May 27, 2020</template>
      <template v-slot:event>Jamstack Conf Virtual</template>
    </app-text>
    ...
  </g>
</template>

<script>
import {
  AppText,
  AppTree,
  AppBush,
  AppStreetlamp2,
} from "@/components";
export default {
  components: {
    AppText,
    AppTree,
    AppBush,
    AppStreetlamp2,
    AppBuildPlugins: () => import("@/components/AppBuildPlugins.vue"),
    AppMillion: () => import("@/components/AppMillion.vue"),
    AppVirtual: () => import("@/components/AppVirtual.vue"),
  },
};
</script>

Note the synchronous and asynchronous loading of components for performance optimization.

SVG Animation with GSAP and ScrollTrigger

Animations leverage GreenSock (GSAP) and its ScrollTrigger plugin. The core animation logic:

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger.js";
import { mapState } from "vuex";

gsap.registerPlugin(ScrollTrigger);

export default {
  computed: {
    ...mapState(["toggleConfig", "startConfig", "isAnimationDisabled", "viewportSize"]),
  },
  methods: {
    millionAnim() {
      let vm = this;
      let tl;
      const isScrollElConfig = {
        scrollTrigger: {
          trigger: `.million${vm.num}`,
          toggleActions: this.toggleConfig,
          start: this.startConfig,
        },
        defaults: {
          duration: 1.5,
          ease: "sine",
        },
      };
      // ... animation logic ...
    },
  },
  mounted() {
    this.millionAnim();
  },
};

Vuex manages toggleConfig (controlling animation triggers) and startConfig (defining animation start points). Banner animations are handled differently than scroll-triggered animations. Timelines use labels for precise animation control. An example of leg-swinging animation:

tl.add(`million${vm.num}`)
  .from(
    "#front-leg-r",
    {
      duration: 0.5,
      rotation: 10,
      transformOrigin: "50% 0%",
      repeat: 6,
      yoyo: true,
      ease: "sine.inOut",
    },
    `million${vm.num}`
  )
  .from(
    "#front-leg-l",
    {
      duration: 0.5,
      rotation: 10,
      transformOrigin: "50% 0%",
      repeat: 6,
      yoyo: true,
      ease: "sine.inOut",
    },
    `million${vm.num} =0.25`
  );

Animation Toggle and Accessibility

A Vuex-controlled toggle allows users to disable animations. The isAnimationDisabled state is watched, and ScrollTrigger animations are paused or reset accordingly, without using .kill() to allow restarting.

Accessibility considerations include using role="img" for decorative elements and unique IDs and titles for interactive elements, ensuring screen readers can effectively navigate the site. The text component example shows how to make SVG text accessible:

<template>
  <a :href="https://www.php.cn/link/8f7f2375ba3e2ee3adf67d0e32c683d5">
    <svg :x="svgCoords.x" :y="svgCoords.y" height="250" viewbox="0 0 280 115.4" width="450" xmlns="http://www.w3.org/2000/svg" aria-labelledby="analyticsuklaunch" role="presentation">
      <title id="analyticsuklaunch">Launch of analytics</title>
      <g>
        <text transform="translate(7.6 14)"><slot name="date">Jul 13, 2016</slot></text>
        <text transform="translate(16.5 48.7)"><slot name="event">Something here</slot></text>
        <text transform="translate(16.5 70)"><slot name="event2"></slot></text>
        <text transform="translate(164.5 104.3)">View Milestone</text>
      </g>
    </svg>
  </a>
</template>

The project's GitHub repository is open-source. The author acknowledges the contributions of their colleagues.

The above is the detailed content of The Making of: Netlify's Million Devs SVG Animation Site. For more information, please follow other related articles on the PHP Chinese website!