Scroll animation for WordPress

Apple-style scroll animation in WordPress – without code.

The product pages people call “Apple-style” use a handful of tricks: a product that turns as you scroll, a scene that holds still while the story moves, words that rise into place and layers that move at different speeds. In Midground, each of them is a setting in a visual editor.

Try it in your browser See the Norn Audio demo

No sign-up · Opens the editor with the Norn Audio demo site · Free beta licence

Scroll to turn it

A product that turns as you scroll.

This is a real 3D model on this page, not a film. Upload a GLB file, choose how far it turns while the page scrolls, and let visitors drag it themselves. The viewer loads only when the model comes near the screen, and slow phones get a picture instead.

Graphite headphones with copper details, in 3D.

The four tricks – and where they are in Midground

A scene that holds stillA Pinned scene holds a section on screen while its acts come and go – the story moves, the page waits.

A product that turnsThe 3D element shows a GLB model with studio lights, and turns it as the page scrolls.

Words that rise into placeText effects reveal a headline word by word or letter by letter, or bring it into focus.

Layers in depthParallax, float and zoom effects move pictures at their own speed as you scroll.

Learn each one step by step: a pinned scene in steps · a 3D model that turns as you scroll · reveal a heading word by word · layers at real depth – or see All scroll animation guides.

How to build one

1 Start from a demoImport a starter site, or open the Norn demo in your browser and take it apart.

2 Add a pinned scenePut the story in a Pinned scene: each act enters and leaves while the section holds still.

3 Drop in your productUpload a GLB model and set how far it turns as visitors scroll.

4 Check it on a phoneChange or turn off any effect for phones, and preview every screen size.

Other ways to get there

You can build this kind of page in several ways. Here is the honest trade-off.

Code it yourselfAnimation libraries such as GSAP can do anything – if you write and maintain the JavaScript, for every page and every screen size.

A page builder with add-onsMost builders animate elements as they appear. Scenes that hold and 3D that turns with the scroll usually mean extra plugins or custom code.

MidgroundA theme and builder made for it: scenes, 3D, text reveals and parallax are built in and set in one editor. One small script runs them all.

Questions

Is Midground made by Apple, or connected to Apple?

No. “Apple-style” only describes a kind of product page that many websites use. Midground is an independent WordPress theme and builder, made in Norway.

Do I need GSAP or another animation library?

No. Midground has its own small runtime – 12.5 KB compressed – and pages without effects load none of it.

What about phones, and people who get dizzy from motion?

Every effect can be changed or turned off per screen size, and visitors who ask their device for less motion get a calm page automatically.

Do I need a 3D model?

No. Scenes, text reveals and parallax work with pictures and video. If you have a product model as a GLB file, Midground can show it.

Do I need to know code?

No. Everything on the demo sites was made by choosing elements, effects and settings in the visual editor.

Take an Apple-style page apart – in your browser.

The editor opens with a full copy of a demo site, in your browser. When you want it on your own site, the beta licence is free.

Try it in your browser Free beta licence