Call to action

A banner grows into place after a short delay, so it gets attention after the content above it.

ReplayCopy link

Ready to start?Install the package for your framework.Get started

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

Effect

scalepop

Easing

PresetSpring

Fine-tune

Duration

600ms

Delay

200ms

Reset

React

CallToAction.jsx

import { Reveal } from "@awesome-reveal/react";
import { scale, spring } from "@awesome-reveal/react/keyframes";

export function CallToAction() {
  return (
    <Reveal
      as="section"
      className="cta"
      keyframes={scale({ from: 0.9, easing: spring() })}
      delay={200}
    >
      <h2>Ready to start?</h2>
      <p>Install the package for your framework.</p>
      <a href="/getting-started/">Get started</a>
    </Reveal>
  );
}

Vue

CallToAction.vue

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

<template>
  <Reveal
    as="section"
    class="cta"
    :keyframes="scale({ from: 0.9, easing: spring() })"
    :delay="200"
  >
    <h2>Ready to start?</h2>
    <p>Install the package for your framework.</p>
    <a href="/getting-started/">Get started</a>
  </Reveal>
</template>

Astro

CallToAction.astro

---
import { Reveal } from "@awesome-reveal/astro";
import { scale, spring } from "@awesome-reveal/astro/keyframes";
---

<Reveal
  as="section"
  class="cta"
  keyframes={scale({ from: 0.9, easing: spring() })}
  delay={200}
>
  <h2>Ready to start?</h2>
  <p>Install the package for your framework.</p>
  <a href="/getting-started/">Get started</a>
</Reveal>

JavaScript

index.html

<section class="cta">
  <h2>Ready to start?</h2>
  <p>Install the package for your framework.</p>
  <a href="/getting-started/">Get started</a>
</section>

main.js

import { reveal } from "@awesome-reveal/core";
import { scale, spring } from "@awesome-reveal/core/keyframes";

reveal(document.querySelector(".cta"), {
  keyframes: scale({ from: 0.9, easing: spring() }),
  delay: 200,
});

Next steps

OptionsDuration, delay, stagger and the viewport options.

SpringsMake an animation overshoot and settle.

AccessibilityReduced motion, screen readers and pages without JavaScript.

Getting startedInstall the package for your framework.