-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;

Use data-sd-animate=” — how to add simple HTML text animations safely

Adding small, tasteful text animations can make a page feel more dynamic without relying on heavy JavaScript libraries. Below is a short, practical guide for adding a simple HTML/CSS animation to text using a data attribute like data-sd-animate, including accessibility and performance tips.

1. Purpose and approach

• Goal: Animate text appearance (fade, slide, or scale) using a data attribute so animations can be initialized or targeted easily.
• Method: Use CSS for the animation and a minimal script to add a CSS class when the element enters the viewport. This keeps animations performant and accessible.

2. HTML structure

Use a semantic element and include the data attribute on elements you want animated:

<p data-sd-animate=“fade-up”>This text will fade up into view.</p>

3. CSS examples

Provide a few reusable animation classes:

[data-sd-animate] {opacity: 0;  transform: translateY(8px);  transition: opacity 420ms cubic-bezier(.2,.9,.2,1), transform 420ms cubic-bezier(.2,.9,.2,1);  will-change: opacity, transform;}
/* Specific variants (optional) */[data-sd-animate=“fade-up”].is-animated {  opacity: 1;  transform: translateY(0);}
[data-sd-animate=“fade-in”].is-animated {  opacity: 1;  transform: none;}
[data-sd-animate=“scale”].is-animated {  opacity: 1;  transform: scale(1);}

4. Minimal JavaScript to trigger on scroll

Use IntersectionObserver for good performance:

<script>document.addEventListener(‘DOMContentLoaded’, function() {  const elements = document.querySelectorAll(’[data-sd-animate]’);  if (‘IntersectionObserver’ in window) {    const io = new IntersectionObserver((entries, obs) => {      entries.forEach(e => {        if (e.isIntersecting) {          e.target.classList.add(‘is-animated’);          obs.unobserve(e.target);        }      });    }, { threshold: 0.12 });    elements.forEach(el => io.observe(el));  } else {    // Fallback: animate all immediately    elements.forEach(el => el.classList.add(‘is-animated’));  }});</script>

5. Accessibility considerations

• Respect reduced-motion preferences:

@media (prefers-reduced-motion: reduce) {  [data-sd-animate] { transition: none; transform: none; opacity: 1; }}

• Ensure animations do not obscure content or interfere with readability.
• Avoid flashing effects that could trigger seizures.

6. Performance tips

• Animate transform and opacity only.
• Use will-change sparingly.
• Limit simultaneous animations and unobserve elements after they animate.

7. Variations and enhancements

• Add delay control: data-sd-delay=“150” and read it in JS to set inline style transition-delay.
• Stagger children by selecting child elements and applying incremental delays in script.
• Combine with CSS variables for easy tuning of duration/easing.

8. Example: delay support (JS snippet)

// inside IntersectionObserver callback, before adding ‘is-animated’const delay = e.target.getAttribute(‘data-sd-delay’);if (delay) e.target.style.transitionDelay = delay + ‘ms’;e.target.classList.add(‘is-animated’);

This pattern keeps markup simple, uses efficient browser APIs, and respects user preferences—resulting in pleasant, lightweight text animations.