Jieying's Playground

Welcome to my Webflow playground!
‍
On this page, I explore different interactions that are interesting and challenging for designers like me, who are keen on building a stunning website on Webflow.
‍
This webpage is design for browsing on laptop only.

Card Flip

Flip the card when hover on the container

Filter effects

Change filter effects on hover

Tips:

All the cards need to be under the same class.

Coffee

$15

sum. Nunc vitae ultrices nisi. Fusce vitae ornare urna, ultrices cursus elit. Ut feugiat ultricies nibh, et eleifend erat dignissim non. Nunc pharetra

Coffee

$15

sum. Nunc vitae ultrices nisi. Fusce vitae ornare urna, ultrices cursus elit. Ut feugiat ultricies nibh, et eleifend erat dignissim non. Nunc pharetra

Coffee

$15

sum. Nunc vitae ultrices nisi. Fusce vitae ornare urna, ultrices cursus elit. Ut feugiat ultricies nibh, et eleifend erat dignissim non. Nunc pharetra

Coffee

$15

sum. Nunc vitae ultrices nisi. Fusce vitae ornare urna, ultrices cursus elit. Ut feugiat ultricies nibh, et eleifend erat dignissim non. Nunc pharetra

Set height

Row 1

background color 1

switch background color without hard edge

Section 1

100vh

Section 2

100vh

Section 3

100vh

Section 4

100vh

Background color 1

100vh

Background color 2

100vh

Background 3

100vh

Background 4

100vh

Set Position

Row 2

background color 2

switch background color without hard edge

Div

Position
Absolute: Full
Z-index: -1

Background Color 1

Position
Absolute: Full

Background Color 2

Position
Absolute: Full

Background Color 3

Position
Absolute: Full

Background Color 4

Position
Absolute : Full

Set Trigger

Row 3

background color 3

switch background color without hard edge

Section 1

On Scroll: Play Scroll Animation
While Scrolling In View

Animation Boundaries:
0%: animation start offset 80%
100%: animation start offset 100%

Section 2

On Scroll: Play Scroll Animation
While Scrolling In View

Animation Boundaries:
0%: animation start offset 80%
100%: animation start offset 100%

Section 3

On Scroll: Play Scroll Animation
While Scrolling In View

Animation Boundaries:
0%: animation start offset 80%
100%: animation start offset 100%

Section 4

On Scroll: Play Scroll Animation
While Scrolling In View

Animation Boundaries:
0%: animation start offset 80%
100%: animation start offset 100%

Add Animation

Row 4

background color 4

switch background color without hard edge

Section 1

Scroll Actions:
0%: Background Color 1 Opacity 100%
100% Background Color 1 Opacity 0%

Section 2

Scroll Actions:
0%: Background Color 2 Opacity 100%
100% Background Color 2 Opacity 0%

Section 3

Scroll Actions:
0%: Background Color 3 Opacity 100%
100% Background Color 3 Opacity 0%

Section 4

Scroll Actions:
0%: Background Color 4 Opacity 100%
100% Background Color 4 Opacity 0%

Body

Section 1

Section 2

Section 3

Section 4

Div

Background color 1

Background color 2

Background color 3

Background color 4

Body

Section 1

Section 2

Section 3

Section 4

Div

Background color 1

Background color 2

Background color 3

Background color 4

CMS category 1

cms category 2

cms category 3

Youtube Tutorial

Instagram Feed Integration