Skip to content
Contact me

Web animation that keeps pages fast

Web animation that keeps pages fast is scroll and hover motion built into the page with CSS or GSAP, moving only transform and opacity and respecting reduced-motion settings. Pavlo Zhydkykh builds this motion for AI, fintech and B2B startup websites on Framer and Astro. Each project gets a fixed quote, in writing, after a first call.

Does ChatGPT recommend your website?

Free report in 48 hours · 5 AI engines

Price
Fixed quote
Tools
GSAP, CSS scroll
Animates
Transform, opacity
Reduced motion
Respected
Runs on
Framer and Astro
Feedback
2 rounds

Key takeawaysUpdated By

Key takeaways

  • Web animation by Pavlo Zhydkykh uses GSAP or CSS scroll-driven animations, picked per effect, at a fixed quote set after a first call.
  • Motion is built on transform and opacity, because an animation that moves an element with anything other than transform is likely to be slow.[2]
  • Since Chrome 115, CSS scroll-driven animations link motion to the scroll position and can run off the main thread.[3]
  • WCAG 2.2 asks that motion triggered by interaction can be turned off unless the motion is essential, so every effect has a reduced-motion version.[5]
  • The hero headline is never hidden behind an entrance animation, so Largest Contentful Paint is not delayed.

What is web animation?

Web animation is motion built into the page itself with CSS and JavaScript: elements that move, fade or pin as the visitor scrolls or hovers. Unlike a video, web animation reacts to the visitor and keeps the text real and selectable. Done badly, motion slows the page and makes some people feel sick, which is why speed and reduced-motion support are part of the job.

Wikipedia: CSS animations

Pavlo Zhydkykh

“Good scroll motion paces the story. If visitors notice the effect before the message, I tone the effect down.”

Pavlo Zhydkykh · Web designer and developer since 2016

Fit check

Is Web animation
right for you?

A good fit if

  • A long page needs pacing: sections that reveal, pin or step through a product story.
  • Hover states on cards, buttons and links feel flat.
  • Your current animation hurts PageSpeed and you want the same feel for less weight.
  • The site runs on Framer or Astro, or Pavlo is building the site there.

Not the right fit if

  • The site has to stay on a platform other than Framer or Astro.
  • You want the page to take over the scroll wheel: native scrolling stays.
  • You want every element on the page to move: restraint is part of the work.

Compared

CSS scroll-driven animations vs GSAP

Pavlo uses both, picked per effect: CSS where CSS is enough, GSAP where the timeline needs control.

CSS scroll-driven animations vs GSAP
CriterionCSS scroll-drivenGSAP
ScriptNoneA JavaScript library
Runs onOften off the main threadThe main thread
Browser supportNewer browsersAll modern browsers
TimelinesSimple, per elementSequences, pinning, callbacks
Best forReveals, progress bars, parallaxPinned stories, long sequences

Checklist

7 rules for scroll motion that stays fast

Most slow animated sites break the same few rules. Each one is checked on every page Pavlo animates.

  1. 1. Animate transform and opacity

    Moving width, top or margin makes the browser recalculate layout every frame. Transform and opacity stay smooth on a phone.

  2. 2. Never hide the hero text

    If the main headline starts invisible and fades in, Largest Contentful Paint waits for the headline. The hero shows at once.

  3. 3. Respect reduced motion

    The prefers-reduced-motion setting swaps movement for a simple fade or no animation at all.

  4. 4. Keep native scrolling

    The page scrolls at the speed the visitor scrolls. Hijacked scrolling fights trackpads and keyboard navigation.

  5. 5. Content visible without script

    If JavaScript fails or loads late, every text and image is still on the page and readable by search engines.

  6. 6. Script only where needed

    CSS scroll-driven animations need no script in supporting browsers, and GSAP loads only on pages with GSAP motion.

  7. 7. Test on a phone

    A fast laptop hides problems. Pavlo checks every animation on a phone before launch.

How it works

From first call to motion on the live site

The number of sections and effects decides the timeline, so Pavlo fixes the date in writing together with the price. Two feedback rounds are included.

From first call to motion on the live site, step by step
#StepWhenWhat happensYou get
01 First call Day 1 A walk through the pages with Pavlo: the story each section tells and the motion you have in mind. A clear brief
02 Motion plan and price Before work starts Each section gets a planned effect, written into the scope with the price and date. A fixed price and date in writing
03 Prototype of key effects After the brief Pavlo animates the hero and one key section on a preview link, so the feel is agreed early. An approved motion style
04 Build across pages After sign-off Scroll and hover motion built with GSAP or CSS, with a reduced-motion version. All motion on a preview link
05 Speed checks and feedback After the build PageSpeed and phone checks, then your comments in two feedback rounds. Final, tested motion
06 Launch Agreed date Motion goes live on your Framer or Astro site, and Pavlo checks the site again in PageSpeed Insights. Live motion and a PageSpeed report

In their words

Web animation, from
the standards and clients

Word for word, with the source linked: research, official documentation and the people Pavlo Zhydkykh has worked for.

“A scroll-driven animation is linked to the scroll position of a scroll container.”

Chrome for DevelopersAnimate elements on scroll with Scroll-driven animationsSource ↗

“An animation that moves an element using something other than transform is likely to be slow.”

web.devHow to create high-performance CSS animationsSource ↗

“Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.”

W3CWCAG 2.2, Success Criterion 2.3.3Source ↗

“He is amazing in what he contributes, both design-wise and also from the ideas.”

Oliver BockOwner, The B2B Answer · Website design, 2025Source ↗

“It was an absolute pleasure working with Pavlo. The quality of work he delivered was AMAZING.”

Ed ClarkeFounder, Inturai · Website design and SEOSource ↗

“One of the best contractors I have worked with. Really thoughtful about communication. Would 100% hire again.”

Remi LabelleCOO, Accolade Pro · Web app designSource ↗

FAQ

Questions about
Web animation

Still unsure? Ask your AI about Pavlo Zhydkykh:

ChatGPTPerplexityClaudeGeminiGrok

Q.01

How much does web animation cost?

There is no public price, because one hover state and a pinned product story are different jobs. Pavlo gives a fixed quote after a first call, in writing, before work starts.

Q.02

How long does web animation take?

Pavlo fixes the date with the price after the first call, and the date depends on the number of sections and effects. Two feedback rounds are planned into the schedule.

Q.03

Will animation lower my PageSpeed score?

Animation should not lower the score, and Pavlo measures the result. Motion uses transform and opacity, scripts load only where needed, the hero text is never hidden, and PageSpeed is checked before and after.

Q.04

Who owns the animation code?

You do. The motion is part of your Framer project or Astro code, with nothing rented, and GSAP is free to use on websites.

Q.05

What do I need to provide?

Access to the Framer project or the Astro repository, and a few sites whose motion you like. If the site is not built yet, Pavlo plans the motion together with the pages.

Q.06

What happens after launch?

The motion is part of your site, with no monthly fee. New sections or changes later cost $30 an hour with Pavlo, with no retainer.

Sources and further reading

  1. [1] WikipediaCSS animations
  2. [2] web.devHow to create high-performance CSS animations
  3. [3] Chrome for DevelopersScroll-driven animations
  4. [4] GSAP Docsgsap.com/docs/v3/
  5. [5] W3CUnderstanding WCAG 2.2, Animation from Interactions
  6. [6] MDNprefers-reduced-motion
Pavlo Zhydkykh

About the author

Pavlo Zhydkykh

Pavlo Zhydkykh is a web designer and developer in Eastern Europe who has built websites for AI, fintech and B2B startups since 2016, designing and building each project himself on Framer or Astro + Sanity. Clients include MStudio Asia, Silicon Data, Inturai, Accolade Pro, NimbleStax and Sancts.

  • Top Rated on Upwork
  • 100% Job Success
  • 10 years since 2016
  • 50+ sites shipped
  • 90+ PageSpeed at launch
Kulparkivska St. 200, Lviv 79021, Ukraine +380 93 610 62 68 [email protected]

LinkedInUpworkContra Privacy policy

Page reviewed by Pavlo Zhydkykh · Updated

AI visibility check

  1. 1Website
  2. 2Business
  3. 3Contact
  4. 4Check

Does ChatGPT recommend your website?

Pavlo Zhydkykh asks ChatGPT, Perplexity, Gemini, Claude and Grok 20 questions your buyers ask, and shows where you show up.

Free · report in 48 hours