Achieving logo swap when scrolling (swap back when user scrolls up)

I have an image in my nav bar that has a default appearance

transform: -79px on the Y axis

When the user scrolls down to a certain point, I have an interaction that affects the image to give it a

transform:‘move to origin’

The idea is that once the user moves past the hero image (which has the logo in it), it will animate the logo into the nav bar.

I have a working example here.

The problem is that I want the image to animate back out of the navbar once the user scrolls back up to the top.

How can I achieve this?

Hello @steelesong

You just need the same workflow but inverted, instead of move to origin move -79 px on the Y axis and display: none on the scroll into view option of the interaction.

Let me know if that helps.


Hi @aaronocampo Im a bit confused. Should I have two interactions?

I’ve done what you said and it doesn’t seem to work.

I have two interactions going on here. When the user scrolls down to the first section and sees the subheading it has an interaction called ''reveal nav photo" which moves the nav bar image down. (it has an initial appearance of -79 pixels on the Y axis so you can’t see it when the page loads)

I then followed your advice and created a second interaction called “remove nav photo” which does the exact opposite. but it doesn’t seem to work. Is this the proper way to do this? or can I achieve this with a single interaction?

I solved it. I created a single interaction on an element in my hero banner.

When the element is out of view, it moves the nav bar image in place. When its scrolled back into view, it moves it back up. I don’t know why I didn’t think to do it this way. It’s much easier.

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