Animation Classes

Animations are applied by adding specific classes to the Advanced / Additional CSS Classes field in the editor.  You can add both default animation and advanced animation in the additional css classes field. By default animations are initiated by adding the class uncg-animate. This triggers a fade-up effect, where the element smoothly fades into view from the bottom as the user scrolls.

For more control over the appearance, timing, and behavior of the animation, you can combine uncg-animate with advanced classes. These advanced classes make up 4 parts of a single animation:  

1. Effect – The type of animation (e.g., fade, slide, flip, or zoom).
2. Timing – How long the animation lasts and whether there’s a delay before it starts.
3. Easing – The movement behavior of the animation (e.g., linear, ease-in, or bounce).
4. Offset – When the animation should trigger based on the element’s position on the screen.

Example: To create a sliding effect from the right with a 300px offset, you would use: uncg-animate uncg-effect-slide-right uncg-offset-300

For more information about advanced classes see the Advanced CSS Classes section below. 

To add the default animation effect to a WordPress Block use the following steps:

1. Open the Advanced / Additional CSS Classes field in the editor for the desired element.
2. Add the base class uncg-animate to activate the animation.
3. Customize the animation by adding the appropriate classes for effect, timing, easing, and offset as outlined below.

While the default setup for adding animations—using the uncg-animate class—works well for basic fade-up effects, the Advanced CSS Classes allows you to take animations to the next level with advanced customizations. By adding specific classes like uncg-effect, you can refine the type of animation (e.g., slide, zoom, or flip). Advanced classes such as uncg-delay and uncg-duration let you control the timing and length of animations, while uncg-offset and uncg-easing enable precise adjustments to the animation’s trigger point and movement behavior. This advanced approach gives you the flexibility to create smooth, engaging animations that are tailored to your content and user experience.

Animation Effects:

The uncg-effect classes determine the type of animation. Here are the options:

• Fade Effects
  • uncg-effect-fade
  • uncg-effect-fade-up
  • uncg-effect-fade-down
  • uncg-effect-fade-left
  • uncg-effect-fade-right
  • uncg-effect-fade-up-right
  • uncg-effect-fade-up-left
  • uncg-effect-fade-down-right
  • uncg-effect-fade-down-left
• Flip Effects
  • uncg-effect-flip-up
  • uncg-effect-flip-down
  • uncg-effect-flip-left
  • uncg-effect-flip-right
• Slide Effects
  • uncg-effect-slide-up
  • uncg-effect-slide-down
  • uncg-effect-slide-left
  • uncg-effect-slide-right
• Zoom Effects
  • uncg-effect-zoom-in
  • uncg-effect-zoom-in-up
  • uncg-effect-zoom-in-down
  • uncg-effect-zoom-in-left
  • uncg-effect-zoom-in-right
  • uncg-effect-zoom-out
  • uncg-effect-zoom-out-up
  • uncg-effect-zoom-out-down
  • uncg-effect-zoom-out-left
  • uncg-effect-zoom-out-right

Animation Timing and Easing:

Customize the timing and behavior of the animation using these classes:

• Delay
  • Use uncg-delay-1000 to add a delay (in milliseconds).
• Duration
  • Use uncg-duration-1000 to set the animation duration (in milliseconds).
• Easing Functions
  • Use the following classes to define easing:
    • uncg-easing-linear
    • uncg-easing-ease
    • uncg-easing-ease-in
    • uncg-easing-ease-out
    • uncg-easing-ease-in-out
    • uncg-easing-ease-in-back
    • uncg-easing-ease-out-back
    • uncg-easing-ease-in-out-back
    • uncg-easing-ease-in-sine
    • uncg-easing-ease-out-sine
    • uncg-easing-ease-in-out-sine
    • uncg-easing-ease-in-quad
    • uncg-easing-ease-out-quad
    • uncg-easing-ease-in-out-quad
    • uncg-easing-ease-in-cubic
    • uncg-easing-ease-out-cubic
    • uncg-easing-ease-in-out-cubic
    • uncg-easing-ease-in-quart
    • uncg-easing-ease-out-quart
    • uncg-easing-ease-in-out-quart

Animation Trigger Offset:

Control when the animation triggers using uncg-offset classes:

• Example: uncg-offset-200 (trigger the animation 200px earlier or later).