Skip to content

🪩 GSAP Animations

The animate.js file in assets/js/theme facilitates animation of HTML elements using the GSAP animation library. By adding certain classes to your HTML elements, you can control how and when they animate. The animations and included functions in animate.js are meant to be used as a starting point. Feel free to edit the file as needed to reach your desired outcome for the project.

General Usage

  1. Animating Elements: To ensure an element gets animated, it needs to have the .animate class.
  2. Sequential Children Animation: For a container whose children should be animated in sequence, use the .animate-children class on the container.

Animation Directions

  • .fromLeft: The element will animate from the left (moves rightward).
  • .fromRight: The element will animate from the right (moves leftward).
  • .fromTop: The element will animate from the top (moves downward).
  • .fromBottom: The element will animate from the bottom (moves upward).

Additional Animation Styles

  • .scaleIn: The element will scale up from 0.1 of its original size.
  • .fadeIn: The element will fade in over a duration of 2 seconds (overrides the default 1-second duration).

Delaying Animations

If you want an animation to delay before it starts, use one of the following:

  • .delay-500: Delays the animation by 0.5 seconds.
  • .delay-1000: Delays the animation by 1 second.
  • .delay-1500: Delays the animation by 1.5 seconds.
  • .delay-2000: Delays the animation by 2 seconds.
  • .delay-2500: Delays the animation by 2.5 seconds.
  • .delay-3000: Delays the animation by 3 seconds.

Counter Animations

To animate numeric values in an element:

  1. Add the .countup class to the element.
  2. Place the desired end value inside the element.

For example:

1
<span class="countup">1,000</span>

When scrolled into view, this element will animate from 0 to 1,000. If the number has a comma, it will still be properly handled. For decimal values, ensure the number is properly formatted (e.g., 12.34).

Example Usage

Basic Animation

1
<div class="animate fromLeft">This content will slide in from the left.</div>

Staggered Child Animations

1
2
3
4
5
<ul class="animate-children fromTop delay-1000">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Here, each <li> will slide in from the top, one after the other, with the entire animation sequence starting after a delay of 1 second.

Counters

1
<div class="countup">1,234</div>

The counter will animate from 0 to 1,234 when scrolled into view.

Additional Plugins

GSAP has several animation plugins that can further extend it's capabilities. These are not included by default, but can be added on a per project basis as-needed. You can see the avaiable GSAP plugins from this page.