Fly-In Content - Scroll Animation
Create animation as the user scrolls, all CSS, no JS required.
Demo
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab velit animi temporibus natus! Tenetur quia veritatis, minus, perspiciatis corrupti consequatur eos accusamus sequi dignissimos rem itaque laboriosam iste et quos.
Obcaecati ducimus dolor eveniet neque, ullam ipsa ipsam accusantium temporibus voluptatem maiores labore odit, laudantium magnam iusto. Ut ipsum aliquam reiciendis itaque excepturi maxime assumenda error a asperiores dignissimos? Suscipit.
Aliquid reprehenderit vitae eaque minima officia quis in? Officiis neque veniam corporis, eligendi inventore voluptatem eaque iure quibusdam, consectetur fugit commodi nemo, delectus aut. Iure dolor inventore illum laborum vel?
Reprehenderit reiciendis blanditiis similique, dicta adipisci dolorum ullam deleniti quaerat quasi aut magni explicabo illum modi impedit accusamus? Obcaecati labore eos necessitatibus itaque hic pariatur eaque iure accusamus nulla veniam?
Cumque optio sed, quasi rerum blanditiis minima doloribus necessitatibus, dolorum accusamus quae dolore? Unde modi repudiandae officia, neque suscipit sequi quas, commodi tempora quam eum eos iure, voluptatibus totam maiores?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab velit animi temporibus natus! Tenetur quia veritatis, minus, perspiciatis corrupti consequatur eos accusamus sequi dignissimos rem itaque laboriosam iste et quos.
HTML
<!-- Nothing special about the HTML, just have to identify what content should "fly-in" -->
<section class="scroll-animation--fly-in fly-in--left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab velit animi temporibus natus! Tenetur quia veritatis, minus, perspiciatis corrupti consequatur eos accusamus sequi dignissimos rem itaque laboriosam iste et quos.</p>
<p>Obcaecati ducimus dolor eveniet neque, ullam ipsa ipsam accusantium temporibus voluptatem maiores labore odit, laudantium magnam iusto. Ut ipsum aliquam reiciendis itaque excepturi maxime assumenda error a asperiores dignissimos? Suscipit.</p>
</section>
<section class="scroll-animation--fly-in fly-in--right">
<p>Aliquid reprehenderit vitae eaque minima officia quis in? Officiis neque veniam corporis, eligendi inventore voluptatem eaque iure quibusdam, consectetur fugit commodi nemo, delectus aut. Iure dolor inventore illum laborum vel?</p>
<p>Reprehenderit reiciendis blanditiis similique, dicta adipisci dolorum ullam deleniti quaerat quasi aut magni explicabo illum modi impedit accusamus? Obcaecati labore eos necessitatibus itaque hic pariatur eaque iure accusamus nulla veniam?</p>
</section>
<section class="scroll-animation--fly-in fly-in--up">
<p>Cumque optio sed, quasi rerum blanditiis minima doloribus necessitatibus, dolorum accusamus quae dolore? Unde modi repudiandae officia, neque suscipit sequi quas, commodi tempora quam eum eos iure, voluptatibus totam maiores?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab velit animi temporibus natus! Tenetur quia veritatis, minus, perspiciatis corrupti consequatur eos accusamus sequi dignissimos rem itaque laboriosam iste et quos.</p>
</section>CSS
/* For demo appearance only */
.scroll-animation--fly-in {
padding-block: 1rem;
margin-block: 1rem;
border-block-end: 1px solid;
}
/* Only apply if the user did NOT request reduced motion */
@media (prefers-reduced-motion: no-preference) {
/* Define the scroll animations */
@keyframes fly-in-left {
from {
opacity: 0;
translate: 100% 0 0; /* Starts offscreen to the right */
}
to {
opacity: 1;
translate: 0 0 0; /* Ends at its natural position */
}
}
@keyframes fly-in-right {
from {
opacity: 0;
translate: -100% 0 0; /* Starts offscreen to the left */
}
to {
opacity: 1;
translate: 0 0 0; /* Ends at its natural position */
}
}
@keyframes fly-in-up {
from {
opacity: 0;
translate: 0 100% 0; /* Starts offscreen to the bottom */
}
to {
opacity: 1;
translate: 0 0 0; /* Ends at its natural position */
}
}
/* Apply the generic animation definitions */
.scroll-animation--fly-in {
animation-timing-function: linear; /* Sets a consistent animation timing */
animation-direction: forwards; /* Tells the animation to retain the end result, rather than revert to the initial state */
animation-duration: 0.5s; /* The duration can be adjusted, but the timeline drives it */
animation-timeline: view(); /* Connect the animation to the view timeline */
animation-range: entry 0% cover 50%; /* Starts when 0% is visible, ends when 50% is visible */
}
/* Apply the specific animations to each component */
.fly-in--left {
animation-name: fly-in-left;
}
.fly-in--right {
animation-name: fly-in-right;
}
.fly-in--up {
animation-name: fly-in-up;
}
}JS
No JS required.Baseline
CodePen
See the Pen on CodePen.