Scroll-driven landing pages win attention. They also lose rankings when copy lives only inside canvas layers, when LCP waits on a 2MB hero loop, or when ScrollTrigger pins the whole page into an unreadable slide deck. ShubhKarma Tech builds GSAP motion for Next.js sites that still need SEO and leads from Dehradun clients.
This guide is the production rules we use after the “premium motion” conversation — focused on ScrollTrigger landing pages.
1) HTML first, theatre second
All ranking copy must exist in the DOM as real text — headings, paragraphs, lists — not only as textures in WebGL.
Google can render JS, but it should not have to excavate your value proposition from opacity:0 layers that never settle.
Use aria-hidden on decorative duplicates; do not aria-label paragraphs with prohibited attributes.
2) ScrollTrigger architecture
Create animations inside a gsap.context and revert on unmount (App Router).
One refresh strategy after fonts/images — not four competing refreshes.
Pin sparingly. One signature pinned chapter beats five fighting pins.
Prefer scrub on storytelling sections; use once:true reveals for simple entrances.
Defer setup with IntersectionObserver until the section is near the viewport so TBT stays low on first load.
3) Performance budget
Animate transform and opacity. Avoid layout thrash (top/height/padding on large nodes).
Limit simultaneous animated nodes.
Respect prefers-reduced-motion with an instant readable layout.
Do not start WebGL fluid cursors or particle fields until pointer input — idle Lighthouse traces should stay calm.
Preload only the LCP font/image; motion assets wait.
4) SEO and conversion on motion pages
Primary H1 visible early — not after a 6-second intro you cannot skip on repeat visits.
CTAs remain clickable during and after animation.
Internal links to services and case studies in a normal content block below the theatre.
Schema and meta still describe the business offer, not “animated experience.”
5) Patterns that convert
Problem → process → proof scrubbed as chapters.
Product explode/assemble for SaaS or hardware.
Horizontal card scrub for case studies — with real anchors for each project.
Micro-interactions on forms and buttons for perceived quality without scroll jail.
6) QA checklist before launch
Mobile Safari and Chrome Android mid-tier.
Keyboard access and reduced motion.
Lighthouse mobile after a cold load — watch LCP element and TBT.
Route changes do not leave orphan ScrollTriggers.
Bottom line
GSAP should direct attention, not hide the offer. If search and sales matter, motion is a layer on top of solid HTML.
Want a motion pass that keeps PageSpeed honest? Contact ShubhKarma Tech.