GSAP

Libreria per creazione di animazioni di elementi HTML

Snippets

sequenza di immagini tipo AirPod

Javascript:

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
 
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
 
canvas.width = 1920;
canvas.height = 1080;
 
const frameCount = 120;
 
const currentFrame = index => (
  `/intro/Muza_logoAnim_sequence_${(index).toString().padStart(5, '0')}.png`
);
 
const images = []
const airpods = {
  frame: 0
};
 
gsap.set("body", { opacity: 1 });
 
for (let i = 0; i < frameCount; i++) {
  const img = new Image();
  img.src = currentFrame(i);
  images.push(img);
}
 
const tl = gsap.timeline({
  defaults: { duration: 1 },
  scrollTrigger: {
    //    start: "-=150",
    trigger: '#product-spotlight',
    scrub: true,
    pin: '.scene',
    start: 'center center',
    end: '350% top',
    markers: true,
  },
});
 
tl.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  scrollTrigger: {
    scrub: true,
    snap: "frame",
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});
 
function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[airpods.frame], 0, 0);
}
 
images[0].onload = render;

HTML:

<div class="section scene">
	<div id="product-spotlight">
		<canvas id='hero-lightpass'/>
		<canvas id='hero-lightpass-two'/>
	</div>
</div>

animare un video

let video = document.querySelector("#video1");
const videoScrub = gsap.timeline({
	currentTime: video.duration,
	scrollTrigger: {
		trigger: '#video1',
		start: "top top",
		end: "+=650 bottom",
		markers: true,
		scrub: true,
		pin: true
	}
});
video.addEventListener('loadedmetadata', function() {
	videoScrub.fromTo(video, {currentTime: 0}, {currentTime: video.duration || 1});
})

Dipende molto dal framerate del video e dai metadata