Combining scroll-driven animations and SVG path animations to rebuild Apple's pencil draw animation

Try it yourself in our playground

Follow along with the tutorial, or just play around with the code. PRO members can fork this code and save it to their account.

Jeroen Reumkens PRO

Animating SVG Paths with Scroll-Driven Animations. All Tailwind classes are for generic styles only. The animation can be found in the CSS file.

1
// Jump into the CSS file to see the magic ☝️
2
// The Tailwind code is only here for the non-relevant pieces.
3

4
export const App = () => {
5
  return (
6
    <div className="w-full bg-black text-white">
7
      <section className="grid min-h-screen place-items-center py-16">
8
        <p className="mb-8 max-w-[15ch] text-center text-[5vw] leading-[1] font-bold text-balance">
9
          Scroll-driven path animations
10
          <span className="my-6 block font-mono text-[3vw]">
11
            🍏{" "}
12
            <a
13
              href="https://www.apple.com/ipad-10.9/"
14
              target="_blank"
15
              className="underline"
16
            >
17
              Apple Style
18
            </a>{" "}
19
            🔗
20
          </span>
21
          <a
22
            className="block text-lg font-normal underline"
23
            href="https://www.frontend.fyi"
24
            target="_blank"
25
          >
26
            By Frontend.fyi
27
          </a>
28
        </p>
29

30
        <p>Time to do the scrolly-scrolly 👇</p>
31
      </section>
32
      <section className="ipad-section">
33
        <div className="svg-container">
34
          <svg
35
            viewBox="0 0 1400 700"
36
            fill="none"
37
            xmlns="http://www.w3.org/2000/svg"
38
          >
39
            <path
40
              d="M817.502 79.4996C817.502 79.4996 471.288 64.9987 508.395 94.9995C545.503 125 591.503 107 759.003 136.5C1250.34 223.034 668.039 234.994 416.503 192C135.711 167.202 650.004 358.498 1035 268C1152.35 253.448 1361.42 429.964 803.003 370.5C394.503 327 280.856 305.789 226.503 327C165.003 351 1129.5 469.998 1253.5 460.5C1357.5 438.5 1690.5 582 888.503 542L118.503 430C-33.4972 406.5 -217.997 565 872.003 582L1357.5 565C1511.5 626 1623 719.5 118.503 613.5C60.9675 609.446 -289 592 388 727"
41
              stroke="black"
42
              strokeWidth="130"
43
              strokeLinecap="round"
44
            />
45
          </svg>
46
        </div>
47

48
        <div className="video-container">
49
          <video
50
            src="https://sandpack.frontend.fyi/img/scroll-driven-path-animations/ipad-video.mp4"
51
            autoPlay
52
            muted
53
            playsInline
54
          />
55
          {/* Video by cottonbro studio: https://www.pexels.com/video/art-creative-hand-ipad-4125735/ */}
56
        </div>
57

58
        <div className="text-container">
59
          <p className="fade-text">All screen. All colorful.</p>
60
          <p className="fade-text">Jot it down. Type it up.</p>
61
          <p className="fade-text">Take it with you.</p>
62
        </div>
63
      </section>
64
      <section className="h-screen bg-gray-100"></section>
65
    </div>
66
  );
67
};

1
/**
2
When copying this style to your own project,
3
be sure to add the below import line to activate tailwind v4
4
@ import "tailwindcss";
5
**/
6

7
.ipad-section {
8
  display: grid;
9
  height: 200vh;
10
  align-items: start;
11
}
12

13
.svg-container {
14
  grid-area: 1/1;
15
  z-index: 10;
16
  background-color: #fff;
17
  mix-blend-mode: lighten;
18
}
19

20
@keyframes paint-line {
21
  to {
22
    stroke-dashoffset: 0;
23
  }
24
}
25

26
.svg-container path {
27
  stroke-dasharray: 9300;
28
  stroke-dashoffset: 0;
29
}
30

31
.video-container {
32
  grid-area: 1/1;
33
  height: 100dvh;
34
  position: sticky;
35
  top: 0;
36
}
37

38
.video-container video {
39
  width: 100%;
40
  height: 100%;
41
  object-fit: cover;
42
}
43

44
.text-container {
45
  grid-area: 1/1;
46
  margin-top: 100dvh;
47
  z-index: 10;
48
  color: #fff;
49
  font-weight: 700;
50
  font-size: 5vw;
51
  text-align: center;
52
}
53

54
@keyframes fade-in {
55
  50% {
56
    opacity: 1;
57
  }
58
}
59

60
.text-container > p {
61
  margin-bottom: 20vh;
62
}
63

64
@supports (animation-timeline: view()) {
65
  .text-container > p {
66
    margin-bottom: 20vh;
67
    opacity: 0;
68
    animation: fade-in both linear;
69
    animation-timeline: view();
70
    animation-range: entry 10% cover 90%;
71
  }
72

73
  .svg-container path {
74
    stroke-dashoffset: 9300;
75
    animation: paint-line linear both;
76
    animation-timeline: view();
77
    animation-range: entry 25% entry 80%;
78
  }
79
}

Last week I came across this Tweet by Wes Bos where he showcased a super neat animation on Apple’s website. I couldn’t stop but notice that Apple still used some JavaScript to pull of this effect, while there is a super modern way to do this with just CSS (see below for browser support).

So I decided this was the perfect opportunity to finally show you all how you can animate SVG paths, and combine it with scroll-driven animations.

I saw this nifty CSS Video Masking technique on the iPad website.

Pretty neat use of CSS - not what I expected! pic.twitter.com/MZIgpmeunp
— Wes Bos (@wesbos) July 18, 2024

A note on browser support

At the time of making this tutorial (july 2024) the animation-timeline is supported in Chromium browsers, with Firefox and Safari working hard on it. In Firefox you can even already experiment with it behind a flag.

Take a look at the diagram below for the latest status.

Combining scroll-driven animations and SVG path animations to rebuild Apple's pencil draw animation

Try it yourself in our playground

A note on browser support

Rebuilding Opal's Amazing Scroll Animations With Modern CSS Techniques