Responsive Safari Mockup

Add some dynamic flair to your iPhone mockups in Webflow. When you scroll down the animated phone unlocking animation is shown to reveal content. The phone has auto updating date and time based on the users location. The iPhone GUI was recreated and the phone has the ability to unlock and reveal content on scroll. The mockup is fully customizable and you can change the content and wallpaper and is also fully responsive on all devices.

Make those Macbook mockups interactive by adding internal scroll to the screens via this Webflow cloneable. This cloneable requires no additional code and can easily be applied to your site. Simply copy the element to your site and then modify the image found in the Macbook wrapper called website image and modify it. This will allow you to add an image inside of a Macbook mockup so that the users can scroll inside of it. A fun way of showcasing items, features, portfolio site screenshots and more.

A unique iPhone mockup screen scroll animation for Webflow and perfect for portfolios and similar design elements. This cloneable features no additional custom code or HTML embeds and utilizes Webflow's native interactions to perform the unique animation. As a user scrolls down the page the images in the iPhone mockup provide a scroll interaction that appears to show the images scroll down as the page is scrolled down. Utilizing Webflow's While scrolling in view this moves the images within the iPhone mockups as the page is scrolled down. Since this is class based this works for all of the iPhone mockup images throughout the site. A simple, yet effective Webflow interaction that makes any portfolio pop.

Two examples of animated Macbook and Apple animated mockups that are perfect for your Webflow site. Two variations of the Macbook coming into view and then opening as the user scrolls down the page. This uses a combination of Webflow interactions and Lottie files, with videos as the backgrounds for the mockup computers. These animated Mac mockups are perfect for portfolios, demo videos, demo GIFs and much more. A great example of how a simple Webflow interaction combined with Lottie files allows for a truly unique and dynamic animation in Webflow.

A great way of displaying videos within a mobile iPhone mockup. You can design the story layout and upload multiple videos into one mobile frame.

Showcase your Webflow projects and portfolio items within a laptop. This includes videos, animations, and more. This is fully responsive and works with your CMS items so that the videos can change dynamically as needed.

How about a 3D interactive iPad mockup in Webflow? Here's a way to add an interactive, 3D iPad mockup to your site.

Here's a unique way of showing images, app screenshots or more in an iPhone mobile slider. The images continuously rotate through and infinite loop.

Another fun text effect, this one shows you how to scramble text between transitions.

A 100% native Webflow tooltips solution. Most tooltips utilize third party JS libraries to add tool tips to Webflow. These tooltips are created 100% with Webflow dropdowns to create a unique solution to creating tooltips within Webflow.

Here are 18 hand drawn SVG elements for your Webflow site. This cloneable includes 18 different arrows inside individual custom embeds. The great thing about SVGs, when setup properly is that they can inherit their color from the font-color of the parent elements.

A Matrix style text scramble effect in Webflow. This entire effect relies on custom code which is included as an HTML embed and was found on a CodePen. In order to modify the text you'll need to update the custom code in the HTML embed.

Here's a fun technique, using a slider with a hover slider to dynamically change the color of a sites background in Webflow. This was all made with Webflow interactions.

A responsive safari mockup built for Webflow. A perfect way to showcase a product demonstration or image in a responsive Safari style window. This Apple Safari mockup window is a light version rather than a dark version.

A free dashboard collection for an ecommerce company.

Here's a way of creating a product tour in Webflow utilizing native interactions and custom tool tips. Rather than using complicated external JavaScript libraries you. can build your own guided product tour using a simple tooltip design and Webflow's native interactions.