Riddle me this… the Brand Link in the navigation… I’d like to have a LIGHT image and a DARK image, so that when I scroll and the background-color of the navigation changes, the image can change from the light version to the dark version.
On the “page interaction” of page scroll, there is no option for “display”, which would be my first thought, have the dark version set initial as “display:none” and then change the light to display none on scroll…
Eh, I got it sort of.
I ended up creating two different brand links with two different images in them.
Set the dark one to transform move up 100px. and then move down 100px on scroll.
Movement a little jerky though. WIll work on transition of it.
Depending on the image - let’s say black on white there is the ‘invert’ from ‘effects’ in the main panel right at the bottom. I’ve not tried that or similar in IX2 though, but if it’s available could be an option to play with.
The interaction is as follows: (Page scrolling)
Image 1 - Start 100% opacity, then 0% opacity
Image 2 - Start 0% opacity, then 100% opacity
I set the keyframes for 10% for the opacity changes, but you can set it for whatever you want really.
I did it at 1%, so it happens immediately, but I thought it was a tadddd too quick.
Of course, I might change that because 10% will be different based on how deep the page is, whereas 1-5% will be hardly any change