153
AI ready

Inline Image Headline

£7
or the whole Vault, £99
Skip the demo Open in new tab

Pinned scroll headline with a picture set as a word in the sentence. Scrolling grows the small pill to full bleed, and the words around it are pushed out along the line as real type.

ScrollTrigger intermediate
6 more details
pinningscrubzoomclip-pathtext-animationscroll-storytelling

Released

About this effect

A giant sentence opens the section with one word replaced by a picture: a small rounded pill sitting in the line at the height of the capitals. As the visitor scrolls, the pill widens and the words either side are shoved outward along the line until they leave at the edges, while the next line slides down and away as the pill grows taller. The type stays solid and sharp the whole way, moving like real typesetting pushed by a growing glyph.

Read the full effect overview

The picture lands exactly full bleed at 1:1, with the corners squared off on arrival. A closing heading and sentence then rise in over it, so each placement reads as a complete story chapter. Put an image or a muted looping video in the media slot, and use it more than once on a page: each copy keeps its own picture, headline and closing text.

Inline Image Headline - GSAP animation effect preview

What's included

9 items
  • A picture set inline in a headline, with its start height tied to the capitals of your type
  • Words are placed from the pill's own edges, so they cannot overlap it at any viewport width
  • Width leads and height follows, with an early shove on the words that the pill then catches up to
  • The subject stays readable in the small crop, then settles to a sharp 1:1 at full bleed with no upscaling
  • Takes an image or a muted looping video in the media slot, with a focus point you can set
  • Closing heading and text arrive once the picture is full, on a scrim measured to clear 4.5:1 over bright water
  • Phones set the pill on its own line and push the words up and down instead, on a shorter scroll
  • Run several copies on one page, each tuned through data attributes for distance, smoothing, pill height, picture scale and shove
  • Reduced motion, no-JS and blocked-CDN visitors get the picture full bleed with every line of text readable

Perfect for

5 use cases
  • Repeated story chapters on a long home page, each with its own photo, headline and closing paragraph
  • Venue, leisure and hospitality pages where one photograph carries the whole pitch
  • Product launches that introduce the product as a word in the opening line
  • Editorial features and campaign pages that open on big type and move into full-bleed imagery
  • Portfolio case studies that step from a title straight into the hero shot or showreel

How it works

2 sections

The headline is ordinary inline type with an empty slot in the sentence. On load the script measures that slot and notes which side of it each word was set on. The picture stays laid out at its final full-bleed size and is shown through a rounded window, so it only ever scales down and lands at a true 1:1.

A pinned, scrubbed timeline drives the window's edges, and each word is positioned from the edge facing it. Resizing re-measures everything, touch devices get a shorter pin, and reduced-motion visitors get a static full-bleed layout with no pin at all.

Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Add the section to your <body>:

In your downloadThe working code for this step, in index.html.

Using It With Your Own Design

What the effect needs from your markup: a [data-iih] root holding .iih__stage, .iih__media with one .iih__asset inside it, and a headline containing one .iih__slot and your text in .iih__word spans. A word span can hold a single word or a whole phrase, and it moves as one piece. .iih__scrim and .iih__payoff are optional, and everything inside .iih__payoff rises in one after another, so a button or link can go there too.

Your own picture or video: any image or video works in the media slot, because the slot takes whatever carries the iih__asset class. For a muted looping video, swap the <img> for:

In your downloadThe working code for this step, in index.html.

Then tell the pill where your subject is. These two properties sit on .iih__media and are percentages of the full-bleed frame. Set them inline or in your stylesheet, with a different pair for phones if the crop changes:

In your downloadThe working code for this step, in index.html.

Your own words: the script works out how to push each word from where your layout set it. A word beside the slot is pushed sideways, a word above it is pushed up and a word below it is pushed down. So the composition is ordinary type: move the slot to a different place in the sentence, add a line or take one away, and the motion follows. The demo's font size is chosen to fill the stage with this sentence, so change font-size on .has-js .iih__headline to suit yours. The headline does not wrap by itself, so longer copy needs a smaller size or a <br class="iih__break">.

What is only the demo's styling: the Bricolage Grotesque face, the ground and ink colours (--iih-ground, --iih-ink), the sizes and the bottom-left position of the closing text.

CSS the effect depends on:

  • The default rules are the static full-bleed layout. The start state sits inside prefers-reduced-motion: no-preference and .has-js, so keep that gate when you restyle or no-JS visitors lose the picture.
  • --iih-cap is the height of your font's capitals as a share of the font size. Bricolage Grotesque is 0.66em. Measure yours so the pill lines up with the capitals.
  • --iih-pill-ratio is the pill's starting width relative to its height. --iih-pill-tint colours the pill for the moment before the script takes over, so match it to your picture.
  • .iih__stage keeps overflow: hidden, which is what clips the words as they leave.
  • The scrim is tuned to this bright water. Check the contrast of the closing text against your own picture, and adjust the opacity in the gradient on .iih__scrim. A darker picture may need much less.

The stage is designed to run the full width of the viewport, so place the section outside any padded or max-width container.

Options

Attribute Values Default Description
data-iih-distance Number 2.6 Pin length in viewport heights. Touch devices use 65% of this.
data-iih-scrub Seconds 0.6 How long the animation takes to catch up with the scroll. 0 locks it directly to the scrollbar.
data-iih-pill Number 1 Pill start height relative to the capitals. 1 matches them exactly, and above 1 it stands taller than the type, centred on it.
data-iih-picture-scale 0.05 to 1 0.42 Scale of the picture inside the small pill. Lower shows more of the frame and higher crops in on your subject. It never goes past 1, and it rises by itself when needed to fill the pill.
data-iih-shove Number 0.12 How far the words run ahead of the pill in the first moments of scroll, in multiples of the font size. 0 keeps them at their resting gap.

Accessibility

  • Reduced motion: visitors get the static layout with the picture full bleed, every line of text visible and no pin. Changing the preference while the page is open switches between the two cleanly.
  • No JavaScript or blocked CDN: the same static layout.
  • Screen readers: the slot is aria-hidden, so the headline reads as a plain sentence, "Swim before the town wakes up". Give the picture useful alt text, or empty alt if the words already say it. The closing text stays in the reading order throughout.
  • Contrast: the closing text is measured against the brightest water behind it and clears 4.5:1 in the demo at each tested viewport.
  • Touch: normal page scrolling with a shorter pin. Up to 700px wide, the pill sits on its own line between the words and the words are pushed up and down. The crop also shifts through object-position on .iih__asset, so set that for your own subject.

Teardown

In your downloadThe working code for this step, in script.js.

Dependencies

Required:

  • GSAP 3.12+ (the demo pins 3.15.0)
  • ScrollTrigger plugin

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

£7