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

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

Device mockups that slap

Device Mockups That Slap

Flowcraft

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

Mockup Scroll

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

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)

Studio Zakmes

Marketing website for an online course business targeting young creatives.

The use of bold typography is a defining characteristic of the design, creating a strong visual impact that draws the user in and immediately captures their attention. The contemporary design and high-contrast color scheme give the site a cutting-edge feel that appeals to young creatives who are always on the lookout for the latest trends and innovations.

To enhance the user experience, we've incorporated scroll animations that add an extra layer of interactivity and engagement. These animations help to guide the user through the site, making it easy to navigate and explore the content.
Overall, the website has been crafted with the needs and interests of young creatives in mind. 

Cre8tive Revolution

CRE8TIVE REVOLUTION | Course Business website

Cloneable Responsive Website Mockup. A responsive iframe browser mockup that displays your live website and toggles desktop and mobile views.

***NOTES***
There are code scripts in the header and footer and within the document as follows. The page header includes custom CSS classes and the footer includes a script. To update the URL navigate to the HTML embed where you will find an iframe. Change the URL within the SRC attribute.

<iframe class="iframe-settings" src="https://yoururlhere.com" title="description" loading="lazy"></iframe> 
<style>.iframe-settings {width:1366px; height:788px; }</style>

Cloneable Responsive Website Mockup

Cloneable Responsive Website Mockup. 

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

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

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

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

Mobile Website Mockup

Scrollable Mobile 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

Looking for an amazing Webflow Template for Design Portfolio, Personal Brand, Graphic Designer, Web Designer, UX Designer, Portfolio, Designer, UI Designer.

- - - - - - - - - -

• 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

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

Can you build a realistic iPad mockup in Webflow?

That's was my initial question, and it lead me on an interesting path...

A few days later, I am pretty happy with the result, and I'll be using this to present my designs to future clients.

If you like it, feel free to clone this template and leave a like while you're here 😁