## Custom Animations

Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/elementor-builder/custom-animations
Updated: 2026-08-19

Monogram features a rich animation system powered by GSAP (GreenSock Animation Platform) with ScrollTrigger. All animations are configurable through the Customizer.

## Animation Controls

Navigate to **Appearance > Customize > Animations** to toggle each animation type independently.

<figure class="doc-figure" data-width="25%" data-align="left" style="max-width: 25%; width: 100%; margin-left: 0px; margin-right: auto;"><img src="https://hub.jkdevstudio.com/storage/docs/2026/04/bf644fe2-a54f-47c3-b921-c2aaea69a01c.webp" alt="" class="doc-image rounded-xl max-w-full"></figure>

## How Animations Behave

### Desktop vs. Mobile

Most animations are desktop-focused. On mobile devices:

- Custom cursor is disabled (touch devices have no hover)
- Tilt effects are disabled
- Complex scroll animations fall back to simpler fade-in effects
- Button scramble and icon ticker are replaced with simple fade animations

### Scroll Entrance Animations

When **Scroll Entrance** is enabled, elements animate as they scroll into view:

- **Opacity** transitions from 0 to 1
- **TranslateY** moves the element upward into position
- **ScaleY** adds a subtle scaling effect
- Animation duration: 0.55 seconds with `power2.out` easing
- Triggers at 90% viewport offset

Menu items use a staggered animation - each item appears 0.08 seconds after the previous one.

### Body Classes

When animations are disabled, the theme adds CSS classes to the `&lt;body&gt;` element:

- `no-scroll-entrance` - when scroll entrance is off
- `no-hover-underline` - when hover underline is off

You can use these classes in custom CSS to adjust styles when animations are disabled.

## Accessibility

The grain overlay respects the `prefers-reduced-motion: reduce` operating system setting. When a user has reduced motion enabled in their OS preferences, the grain animation is automatically disabled.

> **Tip:** To quickly disable all visual movement, turn off **Scroll Entrance** - this single toggle removes the most noticeable animations across your entire site.