Replacing Navbar Logo with smaller variant on scroll

Design help Animations & Interactions
#1

I’ve been trying to figure out how to replace a logo in a navbar with the more simplistic variant once you scroll down a certain amount. There doesn’t seem to be a show/hide option when using the While Page Is Scrolling interaction. Any solutions?

Example: When page is loaded the logo is
L
O
G
O

but after scrolling down a bit it gets replaced with this variant: L O G O

These are images not text logos.

#2

Put the too images in the nav link and simply use “page trigger” : “while page is scrolling” to hyde or show the image you want. Maybee you will have to set a height to the parent div in order to avoid jumping effect when switching from “display hyde” to show.