Skip to main content

Animations

Add stunning visual effects to your scrolling text with pre-built animation modules.

Available Animations

The library includes these pre-built animation modules:

  • Fade - Smooth fade in/out transition
  • Bounce - Bouncy entrance and exit
  • Flip - 3D flip effect
  • Rotate - Rotation animation
  • Scale In - Scale up entrance
  • Scale Out - Scale down exit
  • Zoom In Down - Zoom in from top
  • Cinematic - Cinematic entrance effect
  • Glitch - Glitch effect
  • Rubber Band - Rubber band effect
  • Swing - Swing effect

Animation Examples

Fade Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/fade.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.fade
  });
  scroller.start();
</script>

Bounce Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/bounce.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.bounce
  });
  scroller.start();
</script>

Flip Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/flip.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.flip
  });
  scroller.start();
</script>

Rotate Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/rotate.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.rotate
  });
  scroller.start();
</script>

Scale In Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/scaleIn.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.scaleIn
  });
  scroller.start();
</script>

Scale Out Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/scaleOut.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.scaleOut
  });
  scroller.start();
</script>

Zoom In Down Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/zoomInDown.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.zoomInDown
  });
  scroller.start();
</script>

Cinematic Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/cinematic.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.cinematic
  });
  scroller.start();
</script>

Glitch Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/glitch.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.glitch
  });
  scroller.start();
</script>

Rubber Band Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/rubberBand.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.rubberBand
  });
  scroller.start();
</script>

Swing Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/swing.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.swing
  });
  scroller.start();
</script>

Using with Module Bundlers​

If you're using a module bundler:

main.js
import ScrollingText from 'web-scrolling-text';
import fade from 'web-scrolling-text/animation/fade';

const container = document.getElementById('container');
const texts = ['Hello', 'World'];

const scroller = new ScrollingText(container, texts, {
  ...fade,
  interval: 2000
});

scroller.start();

Mixing Enter and Exit Animations​

You can use different animations for enter and exit:

import fadeAnim from 'web-scrolling-text/animation/fade';
import bounceAnim from 'web-scrolling-text/animation/bounce';

const scroller = new ScrollingText(container, texts, {
  enterAnimation: fadeAnim.enterAnimation,
  exitAnimation: bounceAnim.exitAnimation,
  interval: 2000
});

scroller.start();

Custom Animation Duration​

Combine animations with custom durations:

<script src="https://unpkg.com/web-scrolling-text/dist/animation/fade.min.js"></script>
<script>
  const scroller = new ScrollingText(container, texts, {
    ...ScrollingTextAnimation.fade,
    animationDuration: 500,  // Faster fade
    interval: 1500
  });
  scroller.start();
</script>

unpkg​

<!-- Fade -->
<script src="https://unpkg.com/web-scrolling-text/dist/animation/fade.min.js"></script>

<!-- Bounce -->
<script src="https://unpkg.com/web-scrolling-text/dist/animation/bounce.min.js"></script>

<!-- Flip -->
<script src="https://unpkg.com/web-scrolling-text/dist/animation/flip.min.js"></script>

<!-- Rotate -->
<script src="https://unpkg.com/web-scrolling-text/dist/animation/rotate.min.js"></script>

<!-- Scale In -->
<script src="https://unpkg.com/web-scrolling-text/dist/animation/scaleIn.min.js"></script>

<!-- Scale Out -->
<script src="https://unpkg.com/web-scrolling-text/dist/animation/scaleOut.min.js"></script>

<!-- Zoom In Down -->
<script src="https://unpkg.com/web-scrolling-text/dist/animation/zoomInDown.min.js"></script>

jsdelivr​

<!-- Fade -->
<script src="https://cdn.jsdelivr.net/npm/web-scrolling-text/dist/animation/fade.min.js"></script>

<!-- Bounce -->
<script src="https://cdn.jsdelivr.net/npm/web-scrolling-text/dist/animation/bounce.min.js"></script>

<!-- ... and so on -->
Try the Playground

Visit the interactive playground to preview all animations and generate code snippets!