Creating a color changing fixed logo

Ok Webflow Guru’s…

What’s the easiest way of creating a logo that changes color while scrolling past a section or div?

example: http://cincodesign.com/studio

It changes from white to black on certain sections.

FYI the logo is a flat text based svg

Try to put that svg images in every section as a background image, at exactly same place with option fixed.

I wonder if you can upload a svg into a webfont creator and then change it like you would font color. When filters are eventually available in interactions, it will be a breeze.

1 Like

@Dfink @sabanna Thanks for the help! I appreciate it!

Not sure about adding the svg as a webfont, I never tried that but it’s a cool idea! I wouldn’t be able to do it regardless, even though the logo is flat text based, it’s been tweaked and changed from it’s original origin of font.

Adding the svg image as a background would fix the issue but then there are sizing limitations and the fact I can’t have the logo be a link back to home etc. unless i place a empty fixed link block over the area.

There must be a way to do this with multiple colored svg files and interactions? hidden overflow etc.?

I didn’t mean uploading letters into a font. I meant uploading the entire logo as a letter of a font that can be triggered in webflow. Something like this tool will let you upload your own svg as a letter for a font. https://glyphter.com

@DFink you are a genius…this is awesome. I didn’t even know this was possible. Thank you!

How do I manage to change the color on section/scroll though?

Crap, i forgot you can’t do that via interactions. Maybe do fixed logos of different colors in each section and make sure the section is set to overflow hidden?

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