Scroll into view - change logo contrast

Design help Animations & Interactions
1

I have created a contrast logo which switches between light and dark when going over different sections of the page, my header is set to 100vh and the rest between 60 and 80 vh how can I set the trigger on the interaction so that when I rollover each section the animation fades to the correct one.

One other issue is knowing which direction you have entered and exited the section to know which animation to trigger. Any help would be awesome as I need to get this working I don’t want to have to default to a solid behind the logo.

Here is my public share link: [LINK]https://preview.webflow.com/preview/web-intensive?preview=bac5be0c712966ba1bf6c70e04a2d6ad[1]
(how to access public share link)

2

Hi @bennraistrick

I used a similar effect on a project earlier this year - it looks like you are making progress on this?

I used a little delay on opacity, and some small offsetting to give a softer transition.

Scroll into/out of view should apply whether the direction is up/down or down/up - but let me know if you need any help :slightly_smiling_face:

3

Hey, yeah slow progress, the offset is where I’m having problems, I’m struggling to get the right values as you cannot set vh. I have two logos one is alpha out so when in view one alphas out and one in.

I think if I can get the offset right then it might work but really struggling

4

Ok so the solution @StuM.

Create a blank div 1px x 1px position absolute inside the section and set it to be 100vh top, then add the interaction on that div to trigger no need to offset. and boom done.

Credit to @ryanmorrison for solving this trick.

1 Like
5

Great stuff - thanks for sharing the solution!

1 Like