└── script.js


/script.js:
--------------------------------------------------------------------------------
 1 | const canvas = document.querySelector("canvas");
 2 | const context = canvas.getContext("2d");
 3 | 
 4 | canvas.width = window.innerWidth;
 5 | canvas.height = window.innerHeight;
 6 | 
 7 | 
 8 | window.addEventListener("resize", function () {
 9 |   canvas.width = window.innerWidth;
10 |   canvas.height = window.innerHeight;
11 |   render();
12 | });
13 | 
14 | function files(index) {
15 |   var data = `
16 |     // paste all images here!!
17 |  `;
18 |   return data.split("\n")[index];
19 | }
20 | 
21 | const frameCount = 300;
22 | 
23 | const images = [];
24 | const imageSeq = {
25 |   frame: 1,
26 | };
27 | 
28 | for (let i = 0; i < frameCount; i++) {
29 |   const img = new Image();
30 |   img.src = files(i);
31 |   images.push(img);
32 | }
33 | 
34 | gsap.to(imageSeq, {
35 |   frame: frameCount - 1,
36 |   snap: "frame",
37 |   ease: `none`,
38 |   scrollTrigger: {
39 |     scrub: 0.15,
40 |     trigger: `#page>canvas`,
41 |     //   set start end according to preference
42 |     start: `top top`,
43 |     end: `600% top`,
44 |     scroller: `#main`,
45 |   },
46 |   onUpdate: render,
47 | });
48 | 
49 | images[1].onload = render;
50 | 
51 | function render() {
52 |   scaleImage(images[imageSeq.frame], context);
53 | }
54 | 
55 | function scaleImage(img, ctx) {
56 |   var canvas = ctx.canvas;
57 |   var hRatio = canvas.width / img.width;
58 |   var vRatio = canvas.height / img.height;
59 |   var ratio = Math.max(hRatio, vRatio);
60 |   var centerShift_x = (canvas.width - img.width * ratio) / 2;
61 |   var centerShift_y = (canvas.height - img.height * ratio) / 2;
62 |   ctx.clearRect(0, 0, canvas.width, canvas.height);
63 |   ctx.drawImage(
64 |     img,
65 |     0,
66 |     0,
67 |     img.width,
68 |     img.height,
69 |     centerShift_x,
70 |     centerShift_y,
71 |     img.width * ratio,
72 |     img.height * ratio
73 |   );
74 | }
75 | ScrollTrigger.create({
76 | 
77 |   trigger: "// object you want to pin it.",
78 |   pin: true,
79 |   // markers:true,
80 |   scroller: `#main`,
81 | //   set start end according to preference
82 |   start: `top top`,
83 |   end: `600% top`,
84 | });


--------------------------------------------------------------------------------