Scroll Interaction to shrink/enlarge image

Design help Animations & Interactions
1

Hi,

I’m having trouble with a scroll interaction for my site’s logo. When scrolling down, I want the image to shrink to a smaller size (which I’ve been able to achieve), but when scrolling back up to the top of the page, I want the image to be the size it started out at. I created a “scroll into view” interaction, but it does not seem to be working properly. Any ideas why?

Also, I would like to have the image to become fixed on the page after it shrinks, so it looks like part of the NavBar (I originally had the image placed in the NavBar container but that didn’t allow for the “scroll out of view” interaction to take place since the entire container is fixed). Any ideas for how to go about making the image fixed after the shrinking (but still allow it to increase the size when at the top of the page)?

Here is my public share link: https://preview.webflow.com/preview/gsd-network?preview=7c3e962d2fc293009d4f4d32ff42a5a2

2

Hey @azweber great question!

  1. Try moving your logo into the navbar so that it is in a fixed position and remove the interaction that is currently on it.

  2. Then setup a scroll interaction on your Virtual Hayloft login icon as shown here:

    900×445 2.86 MB

3

Thanks @Waldo! Perfect fix!

4

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