# Alternating sections

> Slide page sections in from alternating sides as each one scrolls into view. Try it live, then copy the code for React, Vue, Astro or plain JavaScript.

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.

* React

  ```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

  ```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

  ```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

  ```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>
  ```

  ```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 options](/concepts/options/#viewport): Choose when an element starts to animate.

[Keyframes](/concepts/keyframes/): The built-in animations, springs and custom keyframes.

[Accessibility](/concepts/accessibility/): Reduced motion, screen readers and pages without JavaScript.

[Getting started](/getting-started/): Install the package for your framework.