banner test fade ins

An example of all fade ins cascade type, (20 elements in total), triggered on scroll. Click on the banner to see the specific single animation.

This is the banner content fade-in--fade
This is the banner content fade-in--fade-up
This is the banner content fade-in--fade-down
This is the banner content fade-in--fade-left
This is the banner content fade-in--fade-right
This is the banner content fade-in--fade
This is the banner content fade-in--fade-up
This is the banner content fade-in--fade-down
This is the banner content fade-in--fade-left
This is the banner content fade-in--fade-right
This is the banner content fade-in--fade
This is the banner content fade-in--fade-up
This is the banner content fade-in--fade-down
This is the banner content fade-in--fade-left
This is the banner content fade-in--fade-right
This is the banner content fade-in--fade
This is the banner content fade-in--fade-up
This is the banner content fade-in--fade-down
This is the banner content fade-in--fade-left
This is the banner content fade-in--fade-right

icon test fade ins

An example of a fade--in-up cascade type, looped 25 times, triggered on scroll

image test fade ins cascade

An example of a fade--in-up cascade type, looped 50 times, triggered on scroll

Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text

image test fade ins no cascade

An example of a fade--in-up no-cascadde type, looped 50 times, triggered on scroll

Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text Image alt text

lottie player

Examples of using lottie-player.

Example 1: On mouseover animation plays forward, on mouseleave animation plays backwards. Notice that this approach make sense when the animation is short like 0.35s maximum. In other cases this can affect a bad UX experience when user unhover the illustration but it still plays.
Example 2: On mouseover animation plays forward, on mouseleave animation stops and resets. Also notice that animation plays till the very end and stops. We can loop animation like on the next example
Example 3: On mouseover animation plays forward and loops when mouse is over, on mouseleave animation stops and resets.
Example 4: Lottie Player as a signifier in the bolt-teaser.

A card variant vertical teaser

This card has the border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.

nested animations cascade

An example of a fade--in-up (nested animated elements) cascade type, looped 50 times, triggered on scroll

Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text
Image alt text Image alt text Image alt text

nested animations no cascade

An example of a fade--in-up (nested animated elements) no-cascadde type with duration long and delay-long in inner elements, looped 50 times, triggered on scroll

this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms
this inner banner is delayed by 500ms

video test bounce ins

Video with No Meta Data

Video with Preview

Video with Title

Video with Duration

Video with Title and Duration

Video with Preview and Duration

Video with Preview and Title

Video with Preview, Title and Duration

Video with No Meta Data

Video with Preview

Video with Title

Video with Duration

Video with Title and Duration

Video with Preview and Duration

Video with Preview and Title

Video with Preview, Title and Duration

Video with No Meta Data

Video with Preview

Video with Title

Video with Duration