IDM241 Microinteractions - Beta Description

Lego Website →

Product Card Details (Scroll down to products)

TRIGGERS:

Age Indicator

Lego Piece Count

Star Rating

RULES:

Age Indicator

Hover On

  • Birthday cake icon transforms up 4px over 0.3 seconds
  • Cursor changes to finger

Hover Off

  • Birthday cake icon transforms down 4px over 0.3 seconds
  • Cursor changes to pointer

Lego Piece Count

Hover On

  • Lego piece icon rotates 25 degrees over 0.3 seconds
  • Cursor changes to finger

Hover Off

  • Lego piece icon rotates -25 degrees over 0.3 seconds
  • Cursor changes to pointer

Star Rating

Hover On

  • Star icon rotates 144 degrees over 0.4 seconds
  • Star icon turns from black to yellow over 0.1 seconds
  • Cursor changes to finger

Hover Off

  • Star icon rotates -144 degrees over 0.4 seconds
  • Star icon turns from yellow to black over 0.3 seconds
  • Cursor changes to point

FEEDBACK:

Age Indicator

Hover On

  • Birthday cake icon transforms up 4px over 0.3 seconds
  • Cursor changes to finger

Hover Off

  • Birthday cake icon transforms down 4px over 0.3 seconds
  • Cursor changes to pointer

Lego Piece Count

Hover On

  • Lego piece icon rotates 25 degrees over 0.3 seconds
  • Cursor changes to finger

Hover Off

  • Lego piece icon rotates -25 degrees over 0.3 seconds
  • Cursor changes to pointer

Star Rating

Hover On

  • Star icon rotates 144 degrees over 0.4 seconds
  • Star icon and text turns from black to yellow over 0.1 seconds
  • Cursor changes to finger

Hover Off

  • Star icon rotates -144 degrees over 0.4 seconds
  • Star icon and text turns from yellow to black over 0.3 seconds
  • Cursor changes to point

LOOPS & MODES

N/A

Gif of Lego microinteractions