.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
AirPods image sequence animation using ScrollTrigger
I'm trying to recreate Apple's Airpods Pro presentation page with ScrollTrigger.
This is what I'm trying to make:
See the Pen ZEbGzyv by j-v-w (@j-v-w) on CodePen
My idea is to use an array which holds all the images and then make use of ScrollTrigger.update() to update the img src based on the scrolling position.
See the Pen poybrBd by make96 (@make96) on CodePen
Changing the image source isn't a good idea. It takes 1 line of canvas code to draw an image in canvas.
function render() {
context.drawImage(images[airpods.frame], 0, 0);
}
If the images have a transparent background, then it would be only 2 lines.
function render() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(images[airpods.frame], 0, 0);
}
See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) o
