IDM 241 Final Build

CVS Item Discovery

CVS_Logo
Ceramic Pumpkin, Iridescent

Fall Fest Ceramic
Pumpkin, Iridescent...

5 stars

$3.99

Cart Icon Add
Color Corrector

CoverGirl Clean Fresh
Skincare Color Corr...

✓
✓
✓
✓
5 stars

$19.99

Cart Icon Add
Gel Polish

Essie Gel Couture
Nail Polish

✓
✓
✓
✓
✓
5 stars

$14.49

Cart Icon Add
Selected Image

Milani Highly Rated
Diamond Lip Gloss

5 stars

$10.99

Cart Icon Add

1. Product Card

TRIGGERS

  • Hover ON
  • Hover OFF

RULES

  • Hover ON
    • Card raises off the background, translating up by 5 pixels
    • Drop shadow increases by 20%
  • Hover OFF
    • Card moves down towards the background, translating down by 5 pixels
    • Drop shadow decreases back to normal outline

FEEDBACK

  • Hover ON
    • Card raises off the background, translating by 5 pixels
    • Drop shadow increases by 20%
  • Hover OFF
    • Card moves down towards the background, translating by 5 pixels
    • Drop shadow decreases back to normal

LOOPS & MODES

  • LOOPS
    • None
  • MODES
    • None

2. Color Picker

TRIGGERS

  • Default/Hover OFF
  • Hover ON
  • Click ON

RULES

  • Default/Hover OFF
    • Cursor is normal
  • Hover ON
    • Cursor changes to finger
    • Outer circle opacity increases by 50%
  • Click ON
    • Checkmark
      • Checkmark appears on clicked circle, easing in at 0.3 seconds
      • Opacity and visibility increases to ensure a smooth transition
    • Product image
      • Product image switches to pertain to color clicked
      • Product image transforms in 0.3 seconds, scaling up by 1.1 and back down to original size

FEEDBACK

  • Default/Hover OFF
    • Cursor is normal
  • Hover ON
    • Cursor changes to finger
    • Outer circle opacity increases by 50%
  • Click ON
    • Checkmark
      • Checkmark appears on clicked circle, easing in at 0.3 seconds
      • Opacity and visibility increases to ensure a smooth transition
    • Product image
      • Product image switches to pertain to color clicked
      • Product image transforms in 0.3 seconds, scaling up by 1.1 and back down to original size

LOOPS & MODES

  • LOOPS
    • None
  • MODES
    • None

3. Add Button Container

TRIGGERS

  • Hover ON
  • Hover OFF

RULES

  • Hover ON
    • Button scales up by 1.1 in 0.3 seconds
  • Hover OFF
    • Button scales back down to normal size

FEEDBACK

  • Hover ON
    • Button scales up by 1.1 in 0.3 seconds
  • Hover OFF
    • Button scales back down to normal size

LOOPS & MODES

  • LOOPS
    • None
  • MODES
    • None

4. Add Button Counter

TRIGGERS

  • Hover ON
  • Hover OFF
  • Click ON

RULES

  • Hover ON
    • Cursor changes to finger
  • Hover OFF
    • Cursor changes back to pointer
  • Click ON
    • Item is added; cart database changes to n plus 1
    • Item quantity increases by 1
    • Item quantity increases with a scale up transition
    • If item quantity is greater than 0
      • Minus button goes to 100% opacity
      • Cart and Add Text disappears
      • Minus button goes to 100% opacity

FEEDBACK

  • Hover ON
    • Cursor changes to finger
  • Hover OFF
    • Cursor changes back to pointer
  • Click ON
    • Item quantity increases by 1
    • Item quantity increases with a scale up transition
    • If item quantity is greater than 0
      • Minus button goes to 100% opacity
      • Cart and Add Text disappears
      • Minus button goes to 100% opacity

LOOPS & MODES

  • LOOPS
    • None
  • MODES
    • None

5. Minus Button Counter

TRIGGERS

  • Default
  • Hover ON
  • Hover OFF
  • Click ON

RULES

  • Default
      • Minus button is at 60% opacity if item quantity is at 0
  • Hover ON
    • Cursor changes to finger
  • Hover OFF
    • Cursor changes back to pointer
  • Click ON
    • Item is removed; cart database changes to n minus 1
    • Item quantity decreases by 1
    • Item quantity decreases with a scale up transition
    • If item quantity is less than 1
      • Minus button goes to 60% opacity
      • Item Quantity disappears
      • Cart and Add Text reappear

FEEDBACK

  • Default
      • Minus button is at 60% opacity if item quantity is at 0
  • Hover ON
    • Cursor changes to finger
  • Hover OFF
    • Cursor changes back to pointer
  • Click ON
    • Item quantity decreases by 1
    • Item quantity decreases with a scale up transition
    • If item quantity is less than 1
      • Minus button goes to 60% opacity
      • Item Quantity disappears
      • Cart and Add Text reappear

LOOPS & MODES

  • LOOPS
    • None
  • MODES
    • None

By: Sreeja Satish