Discover the best iphone websites created by professional designers. Get inspired and start planning your perfect iphone web design today!

iPhone 11 Pro

iPhone 11 Pro Website

This is a MacBook with a scrollable image to showcase whatever you want :)

MacBook scroll effect

MacBook with scroll

Another year, another iPhone, another website rebuild!

iPhone 12 Pro

iPhone 12 Pro Rebuild

I found the effect on the iPhone 14 Pro (2022) site (the site is deleted by Apple every year if a new iPhone comes out.). 

Watch the Tutorial to see how I build the effect: https://youtu.be/w0tJnjrRTlg

Apple like Gradient Text Scroll Effect

Apple like Text Gradient Scroll Effect (iPhone 14 Pro Page)

iPhone Mockup Scroll Animation in Webflow

iPhone Mockup Screen Scroll Animation for your Portfolio

A simple partial clone of Apple App store webpage with a scrolling content within a iPhone frame.

App Store Clone

Phone with scrolling content

parallax-scroll-experiment

Parallax Zoom Effect Experiment

An apple style feature grid that you can clone and customise how you like!

Here's my Webflow tutorial on how this was done: https://www.youtube.com/watch?v=fAkGkF-w1gI

Apple Style Grid

I blended my recent seamless page tabs, along with a phone and background animation to build a fun conversational landing page. The conversations are CMS driven, and load randomly, so you can plug in a bunch of them and create a unique experience for your visitors. 

The portfolio section is a cloneable built by Aaron Rudyk which Icustomized to fit the  theme of this project. Find the original here => https://webflow.com/website/a-project-section-that-slaps

For the contact form, you can thank the folks over at Flowbase. I took one of their popular form templates, and again, made minor modifications to fit the theme. Find the original here => https://webflow.com/website/Webflow-Onboarding-Form-Clone

The site also includes an area to add a custom menu with a Lottie animation as a trigger and the navigation goes from left sidebar to bottom footer for simplicity on mobile devices.

Text Message Landing Page

text-message-landing

An idea I had on how to perfect the way we handle notifications on mobile devices.

Have a look and let me know what you think, if we can make it even better.

Feel free to clone.

iOS Notification concept

iOS Notification NEW concept

This is a rebuild of the sticky interaction effect on the new iPhone Xs page. After scrubbing through youtube tutorials, many webflow forum posts and just plain ol' fiddling around with settings, I finally achieved something pretty close.

I look forward to seeing you all clone away and make something more awesome with this.

🐙✌🏼

Sticky Effect

iPhone Xs Sticky Animation Effect

This is an experiment made for my application to The speed build Challenge at NoCode Conf 2021.

The idea was to build an illustration of a mobile phone in just 5 min. You can see the video in this link:

https://www.loom.com/share/1644244b356540ceba956523d75034d2

Then I decided to make a more complex model to share with the community, just for fun.

The main idea of this technic is to use different layers pilled inside each other in absolute positions and with the use of Z-Index properties. 

I hope you liked it.

3D Iphone

I found the effect on the iPhone SE 2022 page (the site is deleted by Apple every year if a new iPhone model comes out). Variant #1 is using scale and is less cropping of the images. Variant #2 is more flexible. 

Watch the Tutorial to see how I build the effect:
https://youtu.be/dskrpNitKfs

Image Grid Scroll Animation from Apple.com

Make your mockup look more dynamic! I wanted to animate a "phone unlocking" animation to reveal content. Here is the result!

Auto-updating time: Date & time on the phone auto-update based on your user's current date. 

Since the iPhone GUI has been recreated - the phone is able to unlock and reveal content on scroll. The mockup is fully customizable - you can easily change the wallpaper and content. The mockup animation is responsive on all devices.

Phone Unlock

Animated Phone Mockup

At first, glance, when I saw the new homepage right after the event, the animations were so simple and subtle that I got an idea to challenge myself for building the whole page in 1 hour.

And, I DID IT! well kinda sorta in 1 hour give or take.

I've made it a cloneable so feel free to play around.

Fun fact - Apple removed this homepage layout right when I was building it :p

Follow me on Instagram - https://Instagram.com/alevikx

Apple October 2020 Homepage Parallax Animation

Apple October 2020 Homepage Parallax Animation | Built in 1 Hour!

Just replace the image in your Webflow designer in the correct format. The device is vector-based and sharp at any size. The screen image will adjust to the device on a percentage basis.

Pro tip: the best way is to make the iPhone a Webflow symbol (component) so you can easily replace the image via the element settings.

Tutorial: https://youtu.be/YBRo3DKLVoI

iPhone & iPad Pro Mockups (Free Cloneable)

iPhone & iPad Pro Mockups (Free Cloneables)

Complete iPhone 12 Pro web page made in Webflow .
Follow me for more cloneable projects

Discover iphone websites built by the Webflow community

Discover iphone websites built by the Webflow community