iPhone Mockup Scroll Animation in Webflow

Level: Beginner
Animation
ressourcen
Free Cloneable
Live Vorschau
* AFFILIATE LINK
Details
Level
Beginner
Date
July 12, 2026
Author
Lächelnder Mann mit kurzem braunem Haar und Bart vor orangem Hintergrund.
Jonas Arleth
Blog Post

Together we are building a simple mockup scroll animation in Webflow, which allows the screens in the iPhone to move while scrolling. This effect gives site visitors the feeling that they can scroll the page within the mockup. The design is easy to use in a portfolio project. As always, I made the structure available to the community free of charge as a cloneable.

Here you can clone my iPhone and tablet Webflow mockups:
Here's a video on how to best use them: https://youtu.be/YBRo3DKLVoI


More content

Blog Archiv

I Gave Claude Code My Hardest Animation Challenge Yet

Can Claude Code build an infinite slider with a seamless FLIP overlay transition? I tested it with GSAP, Smooothy and my Figma design for a fictional artist agency.
Video
​
Skill
Beginner
Kategorie
AI

Anschauen
Beitrag anschauen

I Designed This in Figma. Can Claude Build It?

I designed a website in Figma and gave Claude only a screenshot, fonts, images and one prompt. See how close AI gets to an individual animated design.
Video
​
Skill
Beginner
Kategorie
AI

Anschauen
Beitrag anschauen

Make a Boring List Impressive with This Simple GSAP Effect

Build a simple typo scroll animation in Webflow with GSAP. Names scale in the center and animated brackets appear, powered by the CMS.
Video
​
Skill
Beginner
Kategorie
GSAP

Anschauen
Beitrag anschauen

Kreative GSAP Hero Animation mit einem 3D Card Loop-Effekt

Learn step-by-step how to animate a premium hero section in Webflow using GSAP, including scroll triggers, staggers, and loop effects.
Video
​
Skill
Intermediate
Kategorie
Animation

Anschauen
Beitrag anschauen

Webflow Text Marquee Animation with the new GSAP Timeline

Learn how to build a looping marquee in Webflow using the GSAP Timeline. No custom code needed scroll-triggered and performance-friendly.
Video
​
Skill
Beginner
Kategorie
GSAP

Anschauen
Beitrag anschauen

Turn Any Product Hero Into a Premium Showcase (No 3D)

Build a 360° rotating product hero in Webflow with AI-generated video, blend modes & container queries. Free cloneable included.
Video
​
Skill
Beginner
Kategorie
Animation

Anschauen
Beitrag anschauen