Triggering an animation based on scroll position
Hi there,
I'm working on a website, and I've been wanting to recreate the following image. Not the design but the animation. It slightly moves left or right depending on whether you scroll up or down as you can see in both images.
I do know how to trigger things when they appear in your viewport but that's only once, this seems to be something entirely different.
The website the image is from has the Boxilla extension to create this I think, at least from what I can see in dev tools.
https://www.zekerzichtbaar.nl/
The website in question if interested
zekerzichtbaar
Zeker Zichtbaar
Reclamebureau Zeker Zichtbaar
Wij maken het, gewoon, hier, in Scherpenzeel. Vanuit een diepgewortelde passie voor creëren zijn we uitgegroeid tot een alom gerespecteerd reclamebureau.
7 Replies
you should check kevin's latest video. what he explains there can be applied to your case
It doesnt seem to be supported on firefox and safari, firefox is not a problem but my users will primarily be viewing the website on ios safari : P
https://chainzoku.io/
Chainzoku has it aswell, the ribbon moves left or right depending on scroll behaviour
Chainzoku
ChainZoku: Mint your Zoku, Take a Side
A multimedia experience where fashion, manga, gaming & storytelling come together. Powered by NFTs.
i dont have anything that runs safari, but if i had to guess i would bet it is done in javascript
you're right
if you want, you can take a look into gsap, and try the scroll animations