Adding animations with CSS/JS

Adding animations to Power Pages using CSS and JavaScript can greatly enhance the user experience by making interactions smoother and visually appealing. This guide covers how to implement animations step by step with practical examples and best practices.

1. Understand the Tools Involved

CSS Animations

Use for simple transitions like fade, slide, zoom, bounce.
Can be triggered on hover, click, or scroll.

JavaScript (JS) Animations

Used when animation is conditional or dynamic (e.g., based on scroll position, form submissions).
Offers more control than CSS alone.

2. Create and Upload CSS/JS Files to Portal

Upload Custom Files via Web Files:

Portal Management > Web Files > + New

Name: animations.css / scripts.js
Partial URL: /css/animations.css or /js/scripts.js
Mime Type: text/css or application/javascript
Upload your custom files.

3. Link CSS and JS in Your Web Template

Edit your Web Template to include:

<!-- In <head> for CSS -->
<link rel="stylesheet" href="/css/animations.css" />

<!-- At the end of <body> for JS -->
<script src="/js/scripts.js"></script>

4. Example: CSS Animation

CSS: `animations.css`

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 1s ease-out forwards;
}

HTML Use in Web Template or Content Snippet:

<div class="animate-fadeInUp">Welcome to Our Portal!</div>

5. Example: JavaScript-triggered Animation

JavaScript: `scripts.js`

window.addEventListener("scroll", function () {
  const elements = document.querySelectorAll(".scroll-fade");

  elements.forEach(el => {
    const position = el.getBoundingClientRect().top;
    if (position < window.innerHeight - 100) {
      el.classList.add("animate-fadeInUp");
    }
  });
});

HTML:

<div class="scroll-fade">This fades in on scroll</div>

6. Hover-based Animations

.hover-grow {
  transition: transform 0.3s ease;
}

.hover-grow:hover {
  transform: scale(1.1);
}

htmlCopyEdit<button class="hover-grow">Hover Me</button>

7. Animate on Page Load

Apply animation classes directly:

<div class="animate-fadeInUp">Loaded with animation</div>

Or delay with JS:

document.addEventListener("DOMContentLoaded", function () {
  document.querySelector(".animate-on-load").classList.add("animate-fadeInUp");
});

8. Optional: Use Animate.css Library

You can also import third-party animation libraries like Animate.css for prebuilt effects.

Upload the `animate.min.css` file or link via CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

Use with HTML:

<div class="animate__animated animate__bounce">Bouncy text</div>

9. Best Practices

Don’t overuse animations; focus on enhancing UX.
Use short durations for snappy feel (0.3s – 1s).
Test on mobile for performance.
Ensure accessibility – animations should not confuse or distract.

10. Debugging and Deployment

Use F12 Developer Tools to inspect styles.
Use Network tab to check CSS/JS load.
Clear portal cache from Admin Center > Portal Actions > Clear Cache if changes don’t reflect.