Image Fly-In
Imagery continuously flies in from deep inside the page toward the viewer, fading in and out around a central zone that stays clear for your content. The whole field glides softly with your cursor.
One of 62 GSAP components in React, Vue and HTML.
On mobile
Image Fly-In is in the free Starter Pack.
This exact component in React, Vue and HTML, in your inbox, ready when you're back at your desk. No card, no trial.
How it's built.
Twelve images live on their own independent cycle, each one spawning far back in the scene, drifting toward you, and fading back out once it passes the camera. Instead of running twelve separate GSAP timelines, a single ticker callback advances a progress value per card and writes the transform straight to the DOM with quickSetter - that's what keeps it smooth with this many moving pieces at once.
Scrolling gives the field a bit of momentum: the faster you scroll, the faster everything drifts toward you, then it eases back down to its resting pace once you stop. Move your cursor and the whole field glides in the same direction, on a deliberately slow follow so it feels fluid instead of reactive - and because the space has real depth, near images shift more than far ones, which is what sells the parallax. The centre content never moves at all.
Whatever you wrap in the content element stays readable without any tuning: the component measures its actual rectangle at load, on resize, and again once the web font arrives, and images simply never spawn inside that box. Swap in your own images by editing the markup, each one is a plain img tag sized to its own aspect ratio. On a phone the field thins out to keep things calm and the cursor pan turns off entirely, since there's no cursor to follow.
What you'll need.
Install
- GSAP
- ScrollTrigger
- SplitText
- CustomEase
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Image Fly-In work with React and Vue?
- Image Fly-In ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Image Fly-In?
- Yes. Image Fly-In is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Image Fly-In without editing code?
- Image Fly-In exposes 6 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Image Fly-In free?
- Image Fly-In is one of the free components. It is delivered as part of the Starter Pack ZIP by email - React, Vue, and HTML included, no expiration, no attribution.
- Can I use Image Fly-In in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Image Fly-In on as many projects as you build, with no attribution required.
- Does Image Fly-In respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
