1.7.0 check — Image effect combinations

Combinations that must never clash.

Rise + tilt follows the mouse + glare + Tilt in on scroll: rises in, tips upright as it scrolls, follows the mouse on hover.

Grinner test graphic: Wide a, labelled edges and corners

Roll in + hover Tilt (round photo): it rolls in, then tilts on hover — the roll is the picture, the tilt is the frame, so they never fight.

A latte with leaf art in a red cup, seen from above

Parallax up + Grey to colour on scroll + entrance Fade + hover Lift.

Grinner test graphic: Wide b, labelled edges and corners

Roll in + Parallax: Parallax owns the picture, so the entrance plays as a Fade instead.

Grinner test graphic: Circle a, labelled edges and corners

Greyscale hover + Grey to colour on scroll (ruled exclusive): the hover greyscale wins — grey at rest, colour on hover, no scroll effect.

The curved facade of Axel Towers in Copenhagen against a bright sky

Sticker (spin) + Roll in + hover Tilt: the sticker owns its spin, so its entrance Settles instead; it keeps spinning.

Grinner test graphic: Circle b, labelled edges and corners

A section with a pinned sticker (bottom right, floating) set to Roll in: it rolls into place where it is pinned.

Grinner test graphic: Circle a, labelled edges and corners

More text in the section.

A Parallax → Children group: its children drift; the image inside is set to Rise — it keeps only the fade (the group owns the movement).

Grinner test graphic: Wide a, labelled edges and corners

A Grinner Sticky column. This column stays pinned while the pictures beside it break out of their frames — and the site header stays stuck at the top. The page clips sideways overflow only because breakout pictures are on it.

Grinner test graphic: Wide a, labelled edges and corners
Grinner test graphic: Circle a, labelled edges and corners
Grinner test graphic: Square b, labelled edges and corners

Zoom on hover + Parallax (never together): Parallax wins, as before.

Grinner test graphic: Wide b, labelled edges and corners