multiple selector not working

[rayhanwealcoder]

🚀 Use Case: Apply ScrollTrigger Animation to All <h2> Headings

Problem

On content-heavy pages (blogs, landing pages, documentation), section headings (<h2>) appear instantly as the page loads. This makes long pages feel static and makes it harder for users to visually understand section boundaries while scrolling.

Proposed Solution

Automatically apply a GSAP ScrollTrigger animation to all <h2> elements so that each heading animates when it enters the viewport.

Expected Behavior

• All <h2> elements animate on scroll
• Animation triggers when the heading enters the viewport (e.g. top 80%)
• Animation runs only once per heading
• Headings already animated by another plugin should be skipped to avoid conflicts

Suggested Animation

• Fade + slide-up animation
• Subtle duration and easing for readability-focused UX

Technical Notes

• Use gsap.utils.toArray("h2") to target all headings
• Check existing GSAP tweens before applying animation
• Use overwrite: "auto" to prevent transform conflicts
• Call ScrollTrigger.refresh() for dynamically loaded content (e.g. Elementor)

Benefits

• Improves content readability and visual flow
• Highlights section transitions naturally
• Reduces the need for manual animation setup
• Works globally across all pages

Example Implementation

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray("h2").forEach(h2 => {
  if (gsap.getTweensOf(h2).length) return;

  gsap.from(h2, {
    y: 40,
    opacity: 0,
    duration: 0.8,
    ease: "power2.out",
    overwrite: "auto",
    scrollTrigger: {
      trigger: h2,
      start: "top 80%",
      once: true
    }
  });
});