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 = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.fade.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.fade.exitAnimation);
</script>

Bounce Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/bounce.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.bounce.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.bounce.exitAnimation);
</script>

Flip Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/flip.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.flip.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.flip.exitAnimation);
</script>

Rotate Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/rotate.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.rotate.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.rotate.exitAnimation);
</script>

Scale In Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/scaleIn.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.scaleIn.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.scaleIn.exitAnimation);
</script>

Scale Out Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/scaleOut.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.scaleOut.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.scaleOut.exitAnimation);
</script>

Zoom In Down Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/zoomInDown.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.zoomInDown.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.zoomInDown.exitAnimation);
</script>

Cinematic Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/cinematic.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.cinematic.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.cinematic.exitAnimation);
</script>

Glitch Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/glitch.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.glitch.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.glitch.exitAnimation);
</script>

Rubber Band Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/rubberBand.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.rubberBand.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.rubberBand.exitAnimation);
</script>

Swing Animation

<script src="https://unpkg.com/web-scrolling-text/dist/animation/swing.min.js"></script>
<script>
  const scroller = document.querySelector('scrolling-text');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.swing.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.swing.exitAnimation);
</script>

Using with Module Bundlers​

If you're using a module bundler (Vite, Webpack, etc.):

main.js
import { register } from 'web-scrolling-text/element';
import fade from 'web-scrolling-text/animation/fade';

// Register the custom element
register();

// Apply animations to the custom element
const scroller = document.querySelector('scrolling-text');
scroller.setAttribute('enter-animation', fade.enterAnimation);
scroller.setAttribute('exit-animation', fade.exitAnimation);

Mixing Enter and Exit Animations​

You can use different animations for enter and exit by specifying different animations on attributes:

import { register } from 'web-scrolling-text/element';
import fadeAnim from 'web-scrolling-text/animation/fade';
import bounceAnim from 'web-scrolling-text/animation/bounce';

register();

const scroller = document.querySelector('scrolling-text');
scroller.setAttribute('enter-animation', fadeAnim.enterAnimation);
scroller.setAttribute('exit-animation', bounceAnim.exitAnimation);

Custom Animation Duration​

Combine custom animations with attributes like animation-duration and interval:

<scrolling-text 
  id="scroller" 
  interval="1500" 
  animation-duration="500"
>
  <div>Fade in and out</div>
  <div>Beautiful animations</div>
</scrolling-text>

<!-- Load the fade animation module -->
<script src="https://unpkg.com/web-scrolling-text/dist/animation/fade.min.js"></script>
<script>
  const scroller = document.getElementById('scroller');
  scroller.setAttribute('enter-animation', ScrollingTextAnimation.fade.enterAnimation);
  scroller.setAttribute('exit-animation', ScrollingTextAnimation.fade.exitAnimation);
</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 -->
tip

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