Website Animations: 86 Live GSAP Examples

This page holds 86 website animations, and every one of them is live. Scroll down and each effect plays as you reach it; hover, drag or press wherever a demo invites you to. We built them as one reusable kit for the sites we make, and 75 of the 86 are GSAP animations, driven by the GreenSock Animation Platform, the JavaScript library behind ScrollTrigger and SplitText. The other 11 need nothing more than CSS and, at most, a few lines of plain JavaScript.

They are grouped into 11 kinds, from hero animations at the top of a page to the page transitions that play between pages. Every effect follows the same rules. The content is in the HTML before any script runs, so search engines and visitors without JavaScript see the finished result. Nothing starts moving until its block is close to the screen. Anything that keeps moving for longer than five seconds has a Pause button.

A few things to know before you scroll. Pointer effects, such as the magnetic button and the custom cursor, need a mouse or a trackpad, so on a phone or tablet you see their still version. Pinned scenes hold their frame still while you scroll through them. Most of them switch to a plain layout on screens narrower than 1,024 pixels, but the image sequence and the converging photo grid pin at every width. If your device is set to reduce motion, every demo shows its finished state rather than moving: that is deliberate, and it is exactly how these effects behave on a real site.

Jump to a group:

• Hero animations (9 effects)
• Scroll animations (7)
• Pinned scroll scenes with ScrollTrigger (11)
• Text animations (8)
• Hover effects (12)
• Micro interactions (7)
• Galleries, sliders and cards (6)
• Navigation, headers and footers (10)
• SVG line drawing (6)
• Number and chart animations (5)
• Page transitions (5)

Hero animations

Hero animations shape how the headline, photo and call to action arrive on the first screen, and one per page is enough on a home or service page. Most play as a page opens; here each one waits until you reach it.

Staggered hero intro

The eyebrow, headline, short line and button rise a little and fade in one after another, all settled within a second. It gives a home or landing page a calm, deliberate opening without holding anyone up, because the button can be clicked from the very start. The whole run is kept short, so it never feels like a loading screen.

Masked headline reveal

Each line of the headline slides up from behind a hidden mask, a fraction of a second after the line above. On a real site it plays as the page opens, which suits one strong statement on a home or about page. GSAP’s SplitText plugin splits the text into lines, and screen readers still hear the whole sentence.

Rotating word headline

One word in the headline rolls upward through a short list, rests on each word for a moment and stops on the last. It is a compact way to name three services or audiences in a single line, with no slider. It plays once, finishes within five seconds and leaves one plain sentence, which is also what screen readers hear.

Roller door hero reveal

The hero photo is uncovered from the bottom edge upward like a roller door going up, with a faint band of slats riding on the moving edge. Then the headline and button settle into place. It suits garage door, shutter and shopfront businesses, where the reveal itself tells the story. A reversed version uncovers the photo from the top down.

Curtain reveal intro

Two solid panels in the brand colour cover the hero for a moment, then slide apart to the left and right to reveal it. On a real site it plays only once per visit, so nobody sits through it twice, and the button underneath works while the panels move. Save it for a launch or a new range rather than a contact page.

Fading hero background

A photo sits behind the hero under a dark overlay and fades away as the visitor scrolls on, so the content below starts on a clean background. It is at its best on a home page that opens with one strong photo. On a real page the photo is fixed to the screen; this demo keeps it inside its own frame. Scroll slowly past it to watch the fade.

Hero zoom on scroll

This is the same hero with a zoom added: the photo starts a little enlarged and settles back to its normal size while it fades, like a camera pulling away. The hero above only fades. It works best with a wide landscape photo on a home page; the soft spots on this sample photo make the change of size easy to see as you scroll past.

Parallax hero

As the hero scrolls away, the background photo drifts slowest, the headline a little faster and the shape in front fastest. This parallax scrolling effect gives a sense of depth without pinning the page, and suits a home page with a product or cutout photo in front. On phones the cutout is hidden, so it never covers the headline.

Morphing blob background

Soft colour shapes drift and slowly change form behind the hero while the text stays still on top. It adds quiet movement to a plain section without a video or a heavy image. The shapes pause when you hover over them, when they are off screen and when you press the Pause button. GSAP’s MorphSVG plugin blends each shape into the next.

Scroll animations

Scroll animations tie movement to the reader’s progress down the page: blocks rise in, photos open, colours change and lines fill. They help long service pages and case studies feel paced rather than static.

Fade in on scroll

Cards rise a short way and fade in, each just after the last, as they come into view. It is the everyday scroll animation of a business site, and it gives service lists, team grids and blog cards some life without getting in the way. These cards hide again once they leave the screen, so scroll away and back to replay them.

Lazy image fade-in

Images download only as they come near the screen, then fade in over 0.6 seconds instead of popping in. It keeps long, image-heavy pages lighter on a slow phone connection. On a fast connection the fade is usually over before you see it, so press Show 2 More Images to load two more and watch them fade in.

Expanding image on scroll

The photo starts as a smaller rounded window in the middle of the frame and opens out to the full width as it rises up the screen, while the picture inside settles from a slight zoom. Used once per page, it suits a feature photo on a service or case study page. GSAP’s ScrollTrigger plugin ties the opening to the scroll position.

Fly-in photo collage

Three headline lines, two round photos, a tall photo, a badge and an arrow link fly in from offset positions and settle into a collage once the block is well on screen. It makes a strong closing call to action at the foot of a home or service page. Scroll back above it and it plays in reverse.

Background colour change on scroll

The background and text colours wash from one scheme to the next as each section arrives, and wash back when you scroll up. It suits a page that moves from a dark hero into light content, or one that gives each service its own colour. Here the colours change inside this frame only, never on the rest of the page.

Scroll velocity skew

Images lean slightly in the direction of scrolling, more when you scroll fast, and straighten again as soon as you stop. It brings a playful, physical feel to a portfolio or gallery page, but it is best kept away from forms and long reading. Scroll quickly up and down past these tiles to see the lean.

Animated process timeline

A thin line in the left margin fills in the accent colour as you scroll, and each numbered step lights up when the line reaches it. It turns a “how it works” or “what happens next” section into something visitors follow step by step. The line is tied to the scroll, so scrolling back up empties it again.

Pinned scroll scenes with ScrollTrigger

Each scene holds still or sticks while you scroll, so a gallery, a timeline or a set of steps plays out at the reader’s pace. They suit showcase pages and case studies; on smaller screens several fall back to simple strips and lists.

Horizontal scroll gallery

A row of project cards slides sideways while the page scrolls down, and each card’s photo settles as it arrives. It earns its place on a portfolio or a range page, where several pieces of work deserve a slow look. On phones and tablets it becomes a strip you swipe. GSAP’s ScrollTrigger plugin pins the frame and drives the strip.

Scrollytelling text steps

The frame holds still while three short statements take turns, each sliding into place, with dots marking your progress. The page itself never jumps; only the words change. An about page or a service overview that makes three or four points in order is a natural fit. On smaller screens the statements simply fade up one after another.

Expanding bento grid

A grid of photo tiles in mixed sizes holds still, then the centre tile grows until it fills the frame while the others slide out and fade. A caption appears over the full photo, and scrolling back reverses it all. It works as an opener for a gallery or a portfolio. GSAP’s Flip plugin works out each tile’s path. On smaller screens the grid stays at rest.

Image sequence on scroll

A picture fills the frame, then plays as a flipbook while you scroll, one frame per 60 pixels, and shrinks into a rounded card. On a product page, a short photo sequence can show an item turning or a door opening. Here sixteen gradient frames stand in for the photos, drawn on a canvas.

Converging photo grid

Two banks of photo columns start apart on either side of a headline, then slide together into one wall as you scroll, while every other column drifts up or down. It needs plenty of photos, which makes it a natural opener for a portfolio or a large gallery. The headline stays readable on its own card throughout.

Split headline on scroll

The two halves of a big headline slide apart as you scroll, and the word between them changes, here from “drift” to “slide”. It suits one statement line on a home or about page, where the movement gives the message a moment of its own. On desktop the frame pins until the move is complete.

Animated year timeline

A row of dated events runs sideways while the frame holds still, and a large year counter ticks over to the event in focus, with a thin line filling as it goes. It fits a company history or an about page. The milestones here are samples. On smaller screens it becomes a simple vertical list of years.

Stacking cards on scroll

Each panel sticks below the header while the next one slides up and covers it, like cards laid on a pile. Use it for a list of services or the steps of a process, where each point deserves the screen to itself. It needs no animation library: the CSS position sticky rule does the work.

Receding card stack

The same stack with one change: as each new card slides over, the card underneath shrinks a little and dims, as if it were stepping back. A process of three or four steps suits it best, as the depth shows what came before. Compare it with the flat stack above: there, covered panels stay full size and full brightness.

Sticky side heading

The heading holds its place in the left column while the copy scrolls past on the right, so the topic never leaves view. It helps on long service pages, policies and case studies, where readers work through a lot of detail. Scroll through the frame on a wide screen to see it hold.

Image changes on scroll

A list scrolls beside a photo card that stays put. As each item crosses the middle of the screen it lights up and the card fades to that item’s photo. It suits a list of services, areas or rooms, where every line has a picture to match. On smaller screens each item shows its photo inline.

Text animations

Every text animation here works on the words themselves: lines rise, labels resolve, phrases type out, highlights sweep in and statements fill with colour. They suit headlines, key facts and quotes, where a little motion draws the eye to the copy that matters.

Line by line text reveal

Each line of a paragraph slides up from behind its own lower edge, one after another, as the block scrolls into view. It suits an intro paragraph, a section heading or a pull quote, where a calm entrance sets the pace of the page. GSAP’s SplitText plugin does the splitting and redoes it whenever the screen width changes, so the line breaks always stay correct.

Text scramble effect

A short label flickers through random letters for a moment, then settles on its real text as it scrolls into view. It works for eyebrow labels, tags and button text on a tech or creative brand, kept to a few words. Hover over the button with a mouse, or tab to it with the keyboard, and the label scrambles again. GSAP’s ScrambleText plugin swaps the characters.

Typewriter text effect

A phrase types itself out letter by letter beneath a headline, with a caret that blinks a few times and then disappears, so the motion is over within five seconds. Use it for one short line in a hero or a section intro, never for body copy. GSAP’s TextPlugin writes the letters, while screen readers get the whole phrase at once.

Scrolling text animation

One line of oversized words slides sideways in step with the scroll while the block passes through the screen, and stops when the scrolling stops. It makes a bold break between sections on a portfolio, studio or brand page, where a few big words carry the mood. Scroll down, then back up, and the line follows both ways.

Animated text highlight

A marker-style band sweeps from left to right behind a key phrase as it scrolls into view, much like running a highlighter pen over a printed page. Keep it for one point per section, such as a guarantee, a deadline or an opening offer, so it still stands out. A phrase that wraps gets its own band on every line.

Animated testimonial quote

A testimonial fades in word by word as it scrolls into view, then the name, the role and the star rating rise in after it. It gives one strong review room to breathe on a service page or beside a contact form. Once the words have landed, the text settles back into its normal layout, so nothing shifts while someone reads it.

Text colour fill on scroll

A large statement paragraph starts in a muted colour and fills to full colour word by word as it passes the middle of the screen, then turns muted again if you scroll back up. It suits one mission statement or promise per page, where the reader’s own scrolling sets the pace. Scroll slowly through the paragraph to watch it fill.

Infinite marquee animation

One row of short phrases glides sideways without end. Scrolling down the page nudges it faster, and scrolling up turns it back for a moment. It suits a strip of services, sectors or awards between two sections. The row pauses while a mouse is over it, and the Pause button stops it until you press Play; in a row of links, keyboard focus pauses it too.

Hover effects

These effects respond to the mouse: links, buttons, cards and pictures react as the pointer moves over them. They suit desktop visitors browsing services or work, and phones and tablets show each one in its still version.

Wave link hover effect

The letters of a link lift in a quick wave, first to last, as the pointer arrives, then settle back as an underline draws in. It suits navigation and footer links, where a small response confirms what can be clicked. Keyboard focus plays the same wave, touch screens get plain links, and the whole effect is CSS with no script.

Rolling button text

On hover, a button’s label rolls up out of view while an identical copy rolls in from below, so the button answers the pointer without changing what it says. Any call to action can carry it, from a booking button to a menu link. The roll is pure CSS and plays on keyboard focus too; on a phone the button simply stays still.

Animated arrow button

A round arrow sits beside the label. On hover the circle shrinks and fills, its stroke thickens and the label slides to the right, which points the eye at the next step. Use it for the one link in a section you most want followed, such as one to a services page. Like the two effects above, it needs no script and plays on keyboard focus as well.

Magnetic button

When the pointer comes near, the button drifts a few pixels towards it with the label moving a touch further, then springs back with a small wobble when the pointer leaves. Keep it for one main call to action per page and never on a form’s submit button. Move a mouse slowly around the button to try it; on a touch screen it stays put.

Custom cursor ring

A small ring trails the mouse pointer with a short lag and grows over links and buttons, while the normal cursor stays visible. It lends a portfolio or agency page some character, but keep it off forms and checkout pages. Here the ring lives only inside the panel, so move a mouse over it; without one, the panel stays plain.

3D tilt cards

Each card leans gently towards the pointer, with a soft sheen of light following it across the surface, and settles flat when the pointer leaves. It lifts product, service or portfolio cards off the page without moving the layout around them. Move a mouse across the cards; on phones and tablets they stay flat.

Spotlight image reveal

The picture darkens and a soft circle of light follows the mouse pointer, so the visitor explores the image a piece at a time. When the pointer leaves, the whole picture is lit again. It suits a kitchen, showroom or product shot with detail worth finding. A CSS mask draws the circle of light, and touch screens see the picture fully lit.

Mouse image trail

Moving the mouse across the band leaves a short trail of pictures that pop in at the pointer and fade a moment later. It is a playful way to show a lot of work quickly on a portfolio or campaign page, and less suited to formal services such as legal advice. Phones and tablets show the band with one still picture.

Mouse parallax hero

Layers in the banner shift a few pixels against the mouse pointer, the nearer ones more than the background, so a flat hero gains a sense of depth while the heading stays still and readable. It suits a home page or campaign banner with a simple layered picture. Move a mouse over the banner to try it; a phone shows it at rest.

Dock magnification effect

A row of small icons magnifies near the mouse like an app dock: the icon under the pointer grows most and shows its label, and its neighbours grow a little. It suits a short row of shortcuts, tools or social links. The space is reserved, so nothing below moves. Phones and tablets show the icons at rest with their labels.

Proximity hover grid

In this grid of tiles, the ones nearest the mouse pointer grow slightly and the effect fades with distance, like a ripple that follows the pointer. It suits a wall of logos, tools or project thumbnails where browsing is the point. Run a mouse across the tiles to see the ripple; touch screens show the grid at rest.

Image reveal on hover

Hovering an entry in this list shows a small picture that trails the pointer and changes as the pointer moves down the list. It turns a plain list of projects or articles into something to browse while it stays a list of ordinary links. On phones and tablets each picture sits beside its entry. The links lead to real guides; the pictures are samples.

Micro interactions

Micro interactions are small responses to what a visitor does: a switch that springs, a field that confirms itself, a message that celebrates being sent. On a business site they make forms, settings and small details clearer without slowing anyone down.

Animated toggle switch

A switch’s knob slides across when it is flipped, overshoots a little and squashes slightly as it lands, which makes the new setting hard to miss. It is made for settings, filters and cookie choices. Underneath is a real checkbox, so it works with a keyboard and without JavaScript, and GSAP’s CustomBounce plugin shapes the landing.

Icon morph animation

When the button is pressed, its drawing morphs smoothly into another shape: here a minus becomes a plus as the answer closes, and a menu icon can turn into a close icon the same way. It suits FAQ toggles and mobile menu buttons, where the icon should always show what the next press does. GSAP’s MorphSVG plugin blends the two shapes.

Inline form validation

When a field is filled in correctly, a small tick draws itself beside it. When a value is wrong, the field gives one small shake as you leave it or press Check Details, and a clear message appears underneath. It belongs on contact and quote forms, where people want to know straight away that a field is right. This demo form sends and stores nothing.

Confetti success message

When a form is sent and its thank-you message appears, a short burst of small shapes pops out from behind the message and falls away within about a second. It suits contact and newsletter forms on a friendly brand, less so a law firm. Press Play Success Burst to see it; GSAP’s Physics2D plugin throws each shape.

Wobbling award badge

An award or accreditation badge gives one short wobble as it comes into view, then stays still, so it catches the eye once without nagging. Trust badges near a call to action or in a footer are the obvious candidates. These badges are generic samples, not real awards. Scroll away and back to see the wobble again.

Drag and throw badges

With a mouse, this box of badges scatters loosely as it comes into view, and each badge can be picked up and thrown: it glides, bounces softly off the walls and comes to rest inside. Tidy Up puts them back in a neat grid. It fits a playful about page, and GSAP’s Draggable and Inertia plugins handle the throw. Phones and tablets show the tidy grid.

Falling letter tiles

Letter tiles are tossed upwards as the box comes into view, then tumble down and pile up on the floor of the box with a small bounce. It is a light touch for a 404 page or a playful campaign, and it plays on phones too. Press Tumble Again to replay it.

Galleries, sliders and cards

These effects present photos and cards in ways visitors can explore: filter a grid, open a photo large, drag a row of cards, swipe through a stack, compare two photos or watch one drift slowly. They suit portfolios, product ranges and project pages.

Filterable portfolio grid

A row of filter buttons sits above a grid of cards. Choose one and the cards that do not match shrink away while the rest glide into their new places; All brings everything back. Portfolios, product ranges and team pages are the usual homes for it. GSAP’s Flip plugin handles the glide, and the filtering itself works without JavaScript.

Lightbox gallery

Choose a thumbnail and it grows from its place in the grid into a large view over a dimmed background. Previous, Next and the arrow keys move through the set, and closing shrinks the photo back into its slot. It suits any gallery of work or products. Escape closes it, and focus returns to the thumbnail you opened.

Draggable card carousel

Drag this row of cards with a mouse or a finger, flick it so it glides and settles on the nearest card, or move it with the Previous and Next buttons and the arrow keys. It loops without an end and never moves by itself. Articles, products and case studies all sit well in it. GSAP’s Draggable and Inertia plugins do the work.

Swipe card stack

Cards sit in a small fanned stack. Drag or flick the top one off to either side to reveal the next, and after the last card the stack starts again. The Next button and the arrow keys do the same, so it works without a mouse. It suits short tips or review cards, especially on phones.

Before and after slider

Two photos share one frame, split by a handle. Drag it, tap along the frame or use the arrow keys to uncover more of either side; the first time the frame comes into view, the handle makes one short sweep to show it moves. It suits renovations, restorations and website redesigns.

Ken Burns pan effect

A large photo drifts very slowly across its frame, then drifts back, like a camera panning across a scene. Pick a wide photo with plenty of detail to take in, such as a garden, a shop floor or a landscape. It only moves while it is on screen, and hovering over it or pressing Pause stops it.

Navigation, headers and footers

These effects help visitors find their way: headers that step aside while people read, menus, tabs and contents lists that answer a tap smoothly, progress markers and a footer that lands. They suit long service pages, guides and sites with many pages.

Hide header on scroll

A sticky header slides up out of the way while the visitor reads down the page, then slides back the moment they scroll up. It earns its place on long pages viewed on phones, where a fixed header takes a big share of a small screen. Scroll down through the sample page, then up a little. Moving keyboard focus into the header always brings it back.

Header returns at the footer

On a page whose header scrolls away, the header slides back in at the top as soon as the footer comes into view, and leaves again when the footer does. It puts the menu back within reach at the end of a long page, without a header that follows every scroll. Scroll inside the sample window down to its footer.

Animated mobile menu

Pressing Menu slides a panel in and brings the links in one by one. Closing plays the same motion backwards, and a second press halfway through turns it round from where it is. That matters on phone menus, which people open and close in a hurry. Escape closes the panel and returns focus to the button.

Sticky table of contents

An “On This Page” list stays beside long content on a desktop while a small marker slides to the chapter being read. Choosing a chapter glides the page there and stops clear of the site header. On phones and tablets the list folds into a panel above the content. It suits guides and long service pages. Any scroll of your own stops the glide.

Sliding tab underline

Choosing a tab makes the underline glide across and stretch or shrink to fit the new label while the panel below changes. The movement shows clearly which tab is open, which helps where a service page splits its detail into tabs such as an overview, the details and the options. The arrow keys move between tabs too.

Animated accordion

Opening a row slides its content open at its natural height while the arrow turns, and closing slides it shut. In this one, opening a row closes the others. An accordion suits optional detail that not every visitor needs, such as process steps, delivery notes or technical specifications. It is built on the browser’s own details element, so the keyboard works as usual.

Smooth scroll to anchor

Links that point further down the same page glide there instead of jumping, stop just below the sticky header and move keyboard focus to the part chosen. It helps on long pages that open with a list of sections. GSAP’s ScrollToPlugin runs the glide, and any scroll of your own stops it at once. Choose a part in the list to try it.

Reading progress bar

A slim bar sits at the top of a long section and fills from left to right as the visitor reads through it, then leaves when the section ends. It suits guides, case studies and specifications, where readers like to know how much is left. GSAP’s ScrollTrigger ties the fill to the scroll position. Read down through the sample section and the bar keeps pace.

Back to top progress ring

A small ring in the lower corner fills as the visitor reads further, and pressing it glides back to the top with keyboard focus following. It helps most on long articles and guides read on phones, where scrolling back up by hand takes a while. GSAP’s DrawSVG plugin draws the ring. Read down the sample article, then press the ring.

Footer drop-in animation

When the visitor reaches the footer, its columns drop in from just above and land with a small bounce, one after another. It gives the end of a page a friendly finish without holding anyone up, as everything is in place within about a second. GSAP’s CustomBounce ease shapes the landing. It plays once, as the footer comes into view.

SVG line drawing

These effects animate SVG drawings: outlines trace themselves, a logo builds, a route crosses a map, a door rolls up and steam rises. They suit icons, process steps and coverage areas, where a drawn line explains more than a photo.

Animated line drawing

An outline drawing traces its strokes one after another as it scrolls into view, then its coloured shapes fade in. It suits icons, diagrams and simple product drawings on a service page, where the drawing itself explains the idea. GSAP’s DrawSVG plugin animates each stroke, and a drawing can also follow the scroll instead of playing once.

Logo reveal animation

A logo mark draws its outline shape by shape, then fills in with colour. By default it plays only once per visit, so it never holds anyone up a second time, which makes it a good fit for a site header or a launch page. On this page it plays each time the page loads, as soon as the mark scrolls into view.

Animated route map

A route line draws across a simple outline map, and each town dot pops in as the line reaches it, while the full list of towns stays readable beside or under the map. A service area page for a trade, removals or delivery business is the obvious place for it. The sample route below crosses the Isle of Wight through six real towns.

Animated process path

A small dot travels along a winding line that links the steps of a process, the line fills in behind it and each step lights up as the dot passes. It suits a “how it works” section, where the scroll walks the visitor through the order of things. GSAP’s MotionPath plugin moves the dot. Scroll slowly to follow it.

Garage door scroll animation

A drawn roller door made of horizontal slats rolls up into its drum as the section scrolls, slat by slat, uncovering what sits behind it. It is made for garage door, shutter and shopfront businesses, where the effect shows off the product itself. Scroll slowly, then back up, to raise and lower the door.

Rising steam animation

Thin steam lines rise above an icon, sway gently and fade, a couple of times, then rest as faint still lines. It adds warmth to a cafe, bakery or kitchen page without a looping video. GSAP’s CustomWiggle ease gives the sway. A looping version is also available, and that one comes with a Pause button.

Number and chart animations

These effects animate figures: numbers count up, bars grow, rings fill, stars light up and a price band follows a slider. They suit results, reports and price guides, as long as every figure on show is real.

Animated counter

Key numbers count up from zero to their exact value when they come into view, one shortly after another, and stop with their thousands separators in place. They suit trust figures such as years trading or projects delivered, as long as each one is true. Screen readers always hear the final number, never the count.

Animated bar chart

The bars of a simple chart grow from zero in turn when the chart comes into view, with each value printed beside its bar. Use it in a short report or a case study, where a handful of real figures make the point. The chart below shows real UK search volumes for five types of website animation.

Animated percentage ring

A circular stroke fills to a percentage while the number in the middle counts up to match, with a short label underneath. It suits one or two headline figures, such as a satisfaction rate or the share of jobs finished on time, provided they come from real data. The two rings here show sample figures.

Star rating animation

A row of stars fills from left to right up to the score as it comes into view, with the score printed beside it. Place it next to a call to action as a review summary, as long as the score comes from a real source the visitor can check. The score shown here is a sample, and the fill is a plain CSS transition.

Price estimate slider

A width slider sits above a rough price band, and the figures roll smoothly to the new band as the slider moves. It suits made-to-measure products such as doors, blinds or worktops, where a ballpark figure helps before a quote. Drag the slider or use the arrow keys. The bands here are samples, and See All Sample Bands opens the full table.

Page transitions

Page transitions play in the moment between one page and the next, so a click feels connected to what appears. They suit sites that change pages without a full reload. This post loads pages the ordinary way, so each plays here in a preview.

Colour wipe transition

A panel in the brand colour sweeps across, covers the old page and then clears off the far side as the new page appears. It suits brand-led sites that want each click to feel deliberate, and the whole sweep is over in under 0.6 seconds. Press Play Transition, then press it again to play it back the other way.

Staggered page entrance

After the visitor moves to a new page, the main blocks near the top rise a few pixels into place, one just after another. Nothing travels far and the page is never held back, so it suits almost any business site, including the more formal ones. Press Play Transition to switch between the two sample pages.

Page loading bar

When the next page takes a moment to arrive, a thin bar runs along the top edge, then completes and fades as the page appears. Quick page loads show nothing at all. It reassures visitors on slow connections that their click has worked. Press Play Transition: the preview makes the next page take just over a second, so the bar has time to show.

Card to hero transition

Choosing a card makes its photo grow smoothly into the large photo at the top of the page it opens, and going back shrinks it into the card again. Portfolios, case studies and product ranges get the most from it, as the photo carries the visitor from the list to the detail. GSAP’s Flip plugin works out the move. Choose a card, then press Back to List.

Roller door transition

The old page rolls up and away like a roller door, with faint slat lines and a bottom rail, and uncovers the new page underneath. It is a playful fit for garage door and shutter firms, and out of place on most other sites. Press Play Transition to roll the door up; a second press swaps back the same way.

Frequently asked questions

What is GSAP?

GSAP, short for GreenSock Animation Platform, is a JavaScript library for animating almost anything in a browser: HTML, SVG, canvas and plain JavaScript values. Its plugins add the specialist jobs, such as ScrollTrigger for scroll-driven animation, SplitText for splitting text into lines, words and letters, MorphSVG for changing one shape into another and Draggable with InertiaPlugin for dragging and throwing. On this page, 75 of the 86 effects use GSAP 3.15.0.

Is GSAP free to use on a business website?

Yes. GSAP is now a Webflow product, and its pricing page says it is “100% free for all users”, the whole library and its plugins included. The licence page says commercial use is covered by the standard licence, which took effect on 30 April 2025. Its main restriction is on rival tools: without prior written consent, GSAP may not be used in a no-code visual animation builder that competes with Webflow. Animating your own website is fine.

Do website animations slow a site down or hurt SEO?

They do not have to. The shared GSAP code these effects load, the core plus ScrollTrigger, is about 45 KB gzipped and downloads once however many effects a page uses. A plugin file is added only on pages whose effects need it, and most effects wait until their block is near the screen before doing their setup. Google’s guidance on Cumulative Layout Shift recommends animating with the CSS transform property rather than changing width, height or offsets such as top and left, because transforms move things without triggering layout shifts, and the effects here move things with transform and opacity wherever they can. The text is in the HTML from the start, so search engines read the same content a visitor sees. This page is far heavier than a normal page would be, because it loads every effect at once; a real page would use two or three. Pinned scenes are the one thing to watch: in our tests, Chrome’s layout shift measure counted some pins starting and stopping as shifts even though nothing visibly jumped, so keep them off pages where Core Web Vitals scores matter most.

Are animated websites accessible?

They can be, if they follow three rules. First, respect the reduced motion setting: the prefers-reduced-motion media query tells a site that the visitor has asked their device to minimise non-essential motion, and every effect here then shows its finished state instead (on Windows 11 the switch is Settings, Accessibility, Visual effects, Animation effects; on a Mac it is System Settings, Accessibility, Motion, Reduce motion, with Display in place of Motion on macOS 15 and earlier). Second, give anything that moves on its own for more than five seconds a way to pause it, which WCAG 2.2 success criterion 2.2.2 requires at Level A; the looping effects on this page have a Pause button. Third, keep every control usable with a keyboard: the sliders here, for example, also move with the arrow keys.

Why do some of these effects not move on my phone?

There are three reasons. Pointer effects such as the tilt cards, the spotlight image reveal and the custom cursor follow a mouse, so a touch screen gets their still version. Most pinned scenes need room to hold the frame while you scroll, so below 1,024 pixels wide they become a normal layout you can scroll or swipe; the image sequence and the converging photo grid are built to pin at every width, phones included. And if reduced motion is switched on in your device’s accessibility settings, every effect shows its finished state.

Can these animations go on a WordPress or Webflow site?

Yes. GSAP is plain JavaScript, so it runs on any website, WordPress and Webflow included. The effects on this page are built as components for Astro, the framework this site uses, so on another platform they would be rebuilt with the same GSAP code rather than copied across as they are. If you would like any of them on your own site, tell us what you have in mind.