Streaming live at 10am (PST)

Animating background-position


#1

Hello,
I have seen examples posted elsewhere in the forum showing how background-position can be animated on hover/click. Is it possible to do this when the trigger is scroll?
Thanks,
Tim


#2

Unfortunately no. Hover states are great because you can modify any of the css properties. But when it comes to interactions, you can only act on display, transforms, opacity...

We all have asked for interactions that can swap classes on triggers, which will remove a lot of limitations.


#3

Hi @Timsig, one idea you might try, is to layer multiple divs on top of each other, using z-index, with a lower layer that has overflow set to hidden, an image widget that covers the div placed in the layer, and scaled so that it starts a little zoomed to account for the amount of movement you might need.

Then you can create a scroll interaction to MOVE the image class in the layer.. It is something to play with anyway wink Don't be afraid to experiment.

For a stellar example of how one can create a site that has a lot of great movement effect, please see:

https://webflow.com/website/Daniel-Spatzek

I believe at the moment, the site can be opened in read-only mode in Webflow, so it may give you some inspiration smile


#4

Thanks both for your replies; Dave, you have got me thinking - will give your suggestion a go.


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.