Webstudio
Log in

Join the Webstudio community

Updated last month

sticky Image - scroll animation

At a glance

The community member is trying to achieve an effect where a sticky image on the left changes opacity when a new text section on the right comes into view. They tried using scroll-based animations to change the opacity from 0% to 95% to 100%, but it did not work, especially with responsive sizing. The community member is concerned that there may not be documentation for scroll-based animations, and only view-based animations are available.

Useful resources
DDominik
Is this effect from relume / webflow possible with the new animation engine ?
https://www.relume.io/preview?cid=uncommon-components/section_layout348
Sticky Image on the left, and 3 text sections on the right. Stacked Sticky Image changes (opacity ) when new text section is on the same height.

I tried it with scroll and changing the opacity with 0% - 95% (opacity: 1) - (opacity: 0) 100%.

But it does not work... especially not with responisble sizing.

I am afraid there is not documentation for scroll based animations ( only view based ).
Add a reply
Sign up and join the conversation on Discord