Alternating sections

Each section slides in from the side opposite to the previous one. Each section has its own Reveal, so it animates when it enters the viewport.

ReplayCopy link

PlanPick an effect for each part of the page.

BuildWrap each part in a Reveal.

ShipEach part animates when it scrolls into view.

Your system reduces motion, so the preview does not animate. The code still follows your choices.

Distance

ShortMediumLong

Easing

SmoothSpring

Fine-tune

Duration

800ms

Delay

0ms

Reset

React

Stories.jsx

import { Reveal } from "@awesome-reveal/react";
import { slide } from "@awesome-reveal/react/keyframes";

export function Stories({ stories }) {
  return stories.map((story, index) => (
    <Reveal
      key={story.title}
      as="section"
      className="story"
      keyframes={slide({ direction: index % 2 ? "left" : "right", distance: 64 })}
      duration={800}
    >
      <h2>{story.title}</h2>
      <p>{story.text}</p>
    </Reveal>
  ));
}

Vue

Stories.vue

<script setup>
import { Reveal } from "@awesome-reveal/vue";
import { slide } from "@awesome-reveal/vue/keyframes";

defineProps(["stories"]);
</script>

<template>
  <Reveal
    v-for="(story, index) in stories"
    :key="story.title"
    as="section"
    class="story"
    :keyframes="slide({ direction: index % 2 ? 'left' : 'right', distance: 64 })"
    :duration="800"
  >
    <h2>{{ story.title }}</h2>
    <p>{{ story.text }}</p>
  </Reveal>
</template>

Astro

Stories.astro

---
import { Reveal } from "@awesome-reveal/astro";
import { slide } from "@awesome-reveal/astro/keyframes";

const { stories } = Astro.props;
---

{stories.map((story, index) => (
  <Reveal
    as="section"
    class="story"
    keyframes={slide({ direction: index % 2 ? "left" : "right", distance: 64 })}
    duration={800}
  >
    <h2>{story.title}</h2>
    <p>{story.text}</p>
  </Reveal>
))}

JavaScript

index.html

<section class="story">
  <h2>Plan</h2>
  <p>Pick an effect for each part of the page.</p>
</section>
<section class="story">
  <h2>Build</h2>
  <p>Wrap each part in a Reveal.</p>
</section>
<section class="story">
  <h2>Ship</h2>
  <p>Each part animates when it scrolls into view.</p>
</section>

main.js

import { reveal } from "@awesome-reveal/core";
import { slide } from "@awesome-reveal/core/keyframes";

document.querySelectorAll(".story").forEach((story, index) => {
  reveal(story, {
    keyframes: slide({ direction: index % 2 ? "left" : "right", distance: 64 }),
    duration: 800,
  });
});

Next steps

Viewport optionsChoose when an element starts to animate.

KeyframesThe built-in animations, springs and custom keyframes.

AccessibilityReduced motion, screen readers and pages without JavaScript.

Getting startedInstall the package for your framework.