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.
Flip the card when hover on the container
Change filter effects on hover
Tips:
All the cards need to be under the same class.
sum. Nunc vitae ultrices nisi. Fusce vitae ornare urna, ultrices cursus elit. Ut feugiat ultricies nibh, et eleifend erat dignissim non. Nunc pharetra
sum. Nunc vitae ultrices nisi. Fusce vitae ornare urna, ultrices cursus elit. Ut feugiat ultricies nibh, et eleifend erat dignissim non. Nunc pharetra
sum. Nunc vitae ultrices nisi. Fusce vitae ornare urna, ultrices cursus elit. Ut feugiat ultricies nibh, et eleifend erat dignissim non. Nunc pharetra
sum. Nunc vitae ultrices nisi. Fusce vitae ornare urna, ultrices cursus elit. Ut feugiat ultricies nibh, et eleifend erat dignissim non. Nunc pharetra
switch background color without hard edge
100vh
100vh
100vh
100vh
100vh
100vh
100vh
100vh
switch background color without hard edge
Position
Absolute: Full
Z-index: -1
Position
Absolute: Full
Position
Absolute: Full
Position
Absolute: Full
Position
Absolute : Full
switch background color without hard edge
On Scroll: Play Scroll Animation
While Scrolling In View
Animation Boundaries:
0%: animation start offset 80%
100%: animation start offset 100%
On Scroll: Play Scroll Animation
While Scrolling In View
Animation Boundaries:
0%: animation start offset 80%
100%: animation start offset 100%
On Scroll: Play Scroll Animation
While Scrolling In View
Animation Boundaries:
0%: animation start offset 80%
100%: animation start offset 100%
On Scroll: Play Scroll Animation
While Scrolling In View
Animation Boundaries:
0%: animation start offset 80%
100%: animation start offset 100%
switch background color without hard edge
Scroll Actions:
0%: Background Color 1 Opacity 100%
100% Background Color 1 Opacity 0%
Scroll Actions:
0%: Background Color 2 Opacity 100%
100% Background Color 2 Opacity 0%
Scroll Actions:
0%: Background Color 3 Opacity 100%
100% Background Color 3 Opacity 0%
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