Animation with scroll position

Ask the community
,
1

Hey folks, do you know how to make the animation controlled by the scroll position?

I saw many of these effects on Apple’s website and here is an article talking about how they made this happen [(https://css-tricks.]((https://css-tricks.) com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/). (Please take out the space between “.” and “com”)

Though there are some scroll animations provided on Wix, I don’t see one that can control the animation with scroll position. And I searched around, don’t see an existing solution on the Wix yet. Will it be possible to use code in Velo?

Thank you all in advance! :smiling_face:

2

Hi,
You can use an embedded widget (aka htmlComponenet, aka iframe) and write the hml, css, and js inside.
For example:

https://jonatandor35.wixsite.com/test/scrollanimation

Code (inside the embedded widget):

<!doctype html>
<html>
<head>
    <style>
        html {
            height: 100vh;
        }
        body {
            height: 500vh;
            background: #000;
        }

        canvas {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            max-width: 100vw;
            max-height: 100vh;
        }
    </style>
</head>
<body>
    <canvas id="hero-lightpass" />
    <script>
        const html = document.documentElement;
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");

const frameCount = 148;
const currentFrame = index => (
  `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg`
)
const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};
const img = new Image()
img.src = currentFrame(1);
canvas.width=1158;
canvas.height=770;
img.onload=function(){
  context.drawImage(img, 0, 0);
}
const updateImage = index => {
  img.src = currentFrame(index);
  context.drawImage(img, 0, 0);
}
window.addEventListener('scroll', () => {  
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(
    frameCount - 1,
    Math.ceil(scrollFraction * frameCount)
  );
  requestAnimationFrame(() => updateImage(frameIndex + 1))
});
preloadImages();
    </script>
</body>
</html>
3

Scrolling from a section above - How do you get this to only start scrolling through the animation when it is fully in frame?

4

Please explain your question, I don’t think i got it.