Scroll Zoom Journey pins a device mockup or artwork on screen and zooms into it as the visitor scrolls. At the end it can hand over to a real section of your page, or stay on the zoomed-in scene. It is built from three elements that work together: the journey, a Zoom Scene and a Zoom Destination.
The device below is pinned while you scroll, and the view zooms in until its screen fills the window. Scroll back up to zoom out.
Three elements, one scroll effect.
Drop Scroll Zoom Journey onto your page. Put one Zoom Scene directly inside it.
Place a Devices element or your own artwork in the Zoom Scene. Add a Zoom Destination with the content you want to arrive in, or choose Keep Scene.
Let it detect the device screen, or target a CSS selector or a manual rectangle. Then set the scroll distance and smoothing.
A pinned, scroll-linked zoom with real content at the end.
The scene stays pinned while the view zooms into the chosen area as the visitor scrolls.
Detect the device screen automatically, use a CSS selector inside the scene, or set a manual rectangle in percentages.
Reveal Destination crossfades into your real content. Keep Scene zooms into the scene without a crossfade.
The destination is a normal section, so its links, buttons and forms work.
Set how long the journey lasts, from 50% to 600% of the screen height.
Choose when the destination starts to fade in, and smooth the motion over up to 2 seconds.
Reduced motion shows both sections normally. Hidden parts are made inert so keyboard users do not tab into them.
Animate on phones, or show both sections normally at 767px and below.
Edit both sections, follow scroll, or preview a fixed point, with an optional target guide.
Anywhere you want to take visitors into a product.
Zoom into a phone screen and land in the app's feature list.
Start on a laptop mockup and arrive in a dashboard walkthrough.
Fly into a device showing your work, then show the project.
Move from a wide scene into the detail of the story.
Zoom into part of a large image to reveal the next chapter.
Turn the first scroll into a moment people remember.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Journey | ||
| End Behaviour | Reveal Destination or Keep Scene. | Reveal Destination |
| Zoom Target | Detect device screen, CSS selector inside Scene, or manual target rectangle. | Detect device screen |
| Target Selector | CSS selector for the zoom target, e.g. .my-screen. | — |
| Target Left / Top (%) | Position of the manual target rectangle. | 25 / 25 |
| Target Width / Height (%) | Size of the manual target rectangle. | 50 / 50 |
| Scroll Distance (viewport %) | How much scrolling the journey takes, 50 to 600. | 180 |
| Sticky Top Offset (px) | Space above the pinned stage, for sticky headers. | 0 |
| Destination Fade Starts (%) | Point in the journey where the destination fades in. Reveal Destination only. | 78 |
| Smoothing (seconds) | 0 to 2. | 0.35 |
| Mobile | Animate, or show both sections normally. | Animate |
| Builder Preview | Edit both sections, follow scroll, or fixed progress. | Edit both sections |
| Preview Progress (%) | The point shown when using fixed progress. | — |
| Show Target Guide in Builder | Outline the zoom target while editing. | — |
| Stage | ||
| Width | Width of the stage. Responsive. | — |
| Background | Stage background colour. | — |
| Zoom Scene and Zoom Destination | ||
| Layout | Breakdance layout controls for the container. | — |
| Background | Background for the container. The destination should be opaque. | — |
| Padding | Space inside the container. | — |
Scroll Zoom Journey with one Zoom Scene directly inside it. Add a Zoom Destination as well if you use Reveal Destination.
Detect device screen is designed for the Devices element. For other artwork, use a CSS selector or a manual target rectangle. An unrotated device gives the closest screen alignment.
Yes. The destination is real page content, so links, buttons and forms work.
Set Sticky Top Offset to the height of your header so the pinned stage sits below it.
If a visitor prefers reduced motion, both sections show normally. You can also choose to show both sections normally at 767px and below.
The destination fades in over the scene, so give it an opaque background.
Scroll Zoom Journey is included with Phox Elements, along with 150+ other premium elements for Breakdance.
