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

Watch Tutorial
-> https://youtu.be/QRFu60NRUxk

We love a good animated mockup. Here are 2 animated mockup components we used to showcase our latest tool - Relume Library. 

We think these animated mockups can be used for product videos, web portfolios and more. Enjoy!

---------

Like this cloneable? 

We've built the world's largest component library and we're excited to release this to the Webflow Community! Simply search from 700+ components, copy with one click and paste them into your Webflow project. 

Try it for FREE
-> https://library.relume.io/

Animated Mockups Cloneable

iPhone Mockup Scroll Animation in Webflow

iPhone Mockup Screen Scroll Animation for your Portfolio

Flowcraft

A mockup phone frame that scrolls a screenshot of mobile site within it.

Mockup Scroll

Device mockups that slap

Device Mockups That Slap

A 3D scroll animation that lets you slowly rotate a tablet towards the viewer while scrolling. You can even use animated videos instead of a static image. I use this setup in one of my case studies in my portfolio.

Watch the Tutorial: 
https://youtu.be/yX_KhCuMx_Q

3D Tablet Scroll Animation | Free Template

3D Tablet Scroll Animation in Webflow | Free Template

Display your videos with this mobile phone mockup. You can design the story layout and upload multiple videos into one mobile frame.

Video Device Mock Up

Video Mobile Mockup

Marketing website for an online course targeting young creatives.

Cre8tive Revolution

CRE8TIVE REVOLUTION

SomeOther Studio uses thoughtful photography to create customizable mockups for designers to showcase their designs. All mockups are made with natural lighting & shadows that bring your designs to life.

someotherstudio

SomeOther Studio

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

Can you showcase your website in context to your clients, without opening Photoshop?

Of course you can!

Clone this demo and use it to put your designs on a pedestal, and impress your clients. It works with videos, images and embedded websites.

I had a lot of fun building this, so if you found this useful, feel free to clone this, leave a like, and share it with a friend.

Cheers ✌️

Interactive Mockup

Interactive Presentation

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

Did a quick (hypothetical) re-design for a London-based company. This isn't used for anything other than showcasing so feel free to clone!

AppearLocal

Homepage UI (cloneable)

Looking for a unique website for your personal brand and design portfolio? Presenting Simplematic X, our creative design portfolio Webflow Template created for world-class designers looking to have an amazing website.

- - - - - - - - - -

Interested in Simplematic X - Modern Designer Webflow Template?

• Check out a live preview here: https://simplematictemplate.webflow.io/

• Purchase it now for $79 on the Webflow Marketplace: https://webflow.com/templates/html/simplematic-x-designer-website-template

- - - - - - - - - -

• BRIX Templates - Looking for another template? Take a look at our collection of premium Webflow Templates on https://brixtemplates.com/

• BRIX Agency - Looking for a hand to design & develop an amazing Webflow website? Get in touch with our amazing team on https://brixagency.com/

[Showcase] Simplematic X | Webflow Template

Simplematic X - Designer Webflow Template | BRIX Templates

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)

Dual interactive mobile website presentation with the use of embedded iFrames.

Mobile Website Mockup

Scrollable Mobile Mockup

Convert Sketch Design to Webflow with  Webflow Interactions 2.0

Presentation Kit

I don't know about everyone else, but I have moved a lot of my design work into Webflow, not just web design, but pretty much all mockups. Anyone else?

Follow me on Dribbble if you want to see other things I make using Webflow!

https://dribbble.com/myonke

Music Player

Fun project to demo new branding ideas to clients. Built out of div blocks so easy to change each time - thanks for looking!

Discover mockup websites built by the Webflow community

Discover mockup websites built by the Webflow community