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. 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! ☺️
Scrolling from a section above - How do you get this to only start scrolling through the animation when it is fully in frame?
Hi,
You can use an embedded widget (aka htmlComponenet, aka iframe) and write the hml, css, and js inside.
For example:
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>