Streaming live at 10am (PST)

Mouseover effect on https://webflow.com/grid


#1

Hi guys,

I’m trying to emulate the mouseover effect on the new https://webflow.com/grid homepage

I love this effect but not 100% how its been achieved.

I’m guessing some custom code may be needed. After looking at the code I saw:

" style=“filter: hue-rotate(-116.014deg); will-change: filter;” class=“bg”>

If anyone has any tips that would be great.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

That’s funny to reverse engineer :slight_smile:

There’s one IX2 that is onLoad and targetting a class that all the grid cells share, that is affecting their color, changing it from one to another to another… and repeat with a loop.

All those cells are divs.

Now there is an opacity IX2 on those divs, or rather on a div surrounding each of them (it’s better to not have several IX on the same element, so it’s better to nest). So those container divs are 0% opacity by defaut, and a onHover IX2 is probably making them 100% opacity and making this opacity fade to 0% in 3 seconds or so.

Or something close :slight_smile:


#3

Oh, as the colored by is a gradient that takes up all the viewport, maybe it’s the other way around: the cells are white and the onHover IX makes them transparent for a few seconds.

@ryanmorrison did you do this? how far are we? :smiley:


#4

This is exactly what happens, yep.


#5

Appreciate the feedback.

Simple trick = great effect :slight_smile:

I’ll give it a go


#6

I reproduced it :slight_smile: I’m not sure my gradient is as complex as theirs (it’s a 1 color to white gradient) but… you see how it works.


#7

Here’s the link to open it in Webflow https://preview.webflow.com/preview/grid-effect?utm_source=grid-effect&preview=add6de3080ef5fba0df7ffe0d08f246b


#8

Love it
:grinning:

Thanks so much @vincent