4 animated icons inspired by Planet Scale. 

✔ Animations using Webflow and Custom code
✔ Client First v1

Sign up for the lesson: www.webflowtips.com/b/how-to-create-animated-icons

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Animated Icons

Video buttons are trending so I decided to create some examples for the community.

To use it you need to:

- Add the embed inside the Example div block (make sure you add your own video URL)
- Add the custom code in Global Styles)

Details:
- Using Finsweet client-first v1
- Custom code

****Important****
Do not link to the video files on the cloneable. Make sure to host the video files in your server. These files will be removed and they won’t work in the near future.

Video Buttons 

Here are 10 different ways to display time in your projects. 

Super easy to implement, just copy and paste the component. 

Details:

✔ Simple script
✔ Using Finsweet client-first v1
✔ Different options

Sign up for the lesson: www.webflowtips.com/b/how-to-add-time-to-your-webflow-site

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Time - 10 different options

I've never seen Linear's animation in Webflow so I decided to build it.

I added my own style so it's not 100% the same.

Details: 
✔ Using only Webflow animations
✔ Using Finsweet client-first v1
✔ Trigger on load or on scroll

Sign up for the lesson: www.webflowtips.com/b/how-to-create-an-animation-like-linear-app

P.S Like or follow if this was useful for you 🙂 🙌

Linear App Animation

Here is a mix of two previous tips to create a Typing Terminal. There are four different styles that you can easily modify: Green, Light, Dark and Blue.

Some custom code was used for the typing effect (using typed.js library’s) and some custom css was used to modify the cursor color. 

Details:

✔ Calculate Div Dimensions
✔ Finsweet Client-First V1
✔Drag Window

Previous tips used in this mix:

https://www.webflowtips.com/b/how-to-create-a-browser

Sign up for the lesson: www.webflowtips.com/b/how-to-create-a-terminal-with-a-typing-animation 

If you have any questions feel free to comment. 

P.S Like or follow if this was useful for you 🙂 🙌

Typing Terminal - 4 Styles!

Here’s a free animated hamburger navigation button that you can use for your Webflow projects. 

✔  Webflow Animations
✔  Client-First V1
✔  No image or SVG

Sign up for the lesson: www.webflowtips.com/b/how-to-create-animated-nav-button-no-2

P.S Like or follow if this was useful for you 🙂 🙌

Animated Nav Button #2

Here is a gradient circle loader that loops for ever. Unfortunately, I had to use images for the gradients because the Webflow gradients didn’t work in Safari and in some mobile browsers. 

✔ Animations using Webflow
✔ Client-First v1

Sign up for the lesson: http://www.webflowtips.com/b/how-to-create-a-gradient-circle-loader-3

Based on this codepen: https://codepen.io/hopefulcodegirl/pen/JjKXqrr

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Loader #3 - Gradient Circle

The team at Eurecah did an amazing job with the otherworldspace.webflow.io redesign . Here is a similar card hover animation they used on the press section.  

✔ Animations using Webflow
✔ Client First v1

Sign up for the lesson: http://www.webflowtips.com/b/how-to-create-a-card-hover-animation-2

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Card Hover Animation #2

Here are 3 animated buttons based on @Mural’s beautiful new redesign.

Check out the entire site, it’s full of fun details.

To use them you just need a small snippet of CSS code that you can find in the “Global Styles” embed. 

✔ Simple Custom Code 
✔ Client First v1

Sign up for the lesson: [www.webflowtips.com/b/how-to-create-this-animated-button-no-2](www.webflowtips.com/b/how-to-create-this-animated-button-no-2)

If you have any questions feel free to comment. 

P.S Like or follow if this was useful for you 🙂 🙌

Button #2 - Icon Background Expands

This small component was super fun and easy to make. You can use it in your footer or even as a popup. Inspired by houseof.world

✔ Native Webflow Slider
✔ Client First v1

Sign up for the lesson: www.webflowtips.com/b/how-to-create-newsletter-signup-form-with-a-slider

P.S Like or follow if this was useful for you 🙂 🙌

Newsletter Signup Form w/ Slider

Here is a fun interactive menu for your projects. 

✔ Animations using Webflow
✔ Client First v1

Sign up for the lesson: http://www.webflowtips.com/b/how-to-create-nav-menu

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Nav Menu #1

I saw a tweet from Anticollective and thought that it would be great to do something similar in Webflow. It’s super simple and will take ~20 mins to make it. 

✔ Animations using Webflow
✔ Client First v1

Sign up for the lesson: www.webflowtips.com/b/how-to-create-vertically-scrolling-text

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Vertically Scrolling Text

A simple animation when you hover over a card. 

✔ Only Webflow Animations
✔ Client First v1

3D Abstract Shapes by: webdesign.uiux

Sign up for the lesson: www.webflowtips.com/b/how-to-create-a-card-hover-animation

P.S Like or follow if this was useful for you 🙂 🙌

Card Hover Animation #1

Inspired by Noah Raskin’s clonable, I created two coupons using Finsweet’s script for the copy to clipboard functionality.

To use it you need to:

1. Add Finsweets script into the <head> of your page
2. Add the attributes to your buttons (https://finsweet.com/attributes/copy-to-clipboard)
3. Publish your project

Sign up for the lesson: www.webflowtips.com/b/how-to-create-copy-to-clipboard-coupons

P.S Like or follow if this was useful for you 🙂 🙌

Copy to Clipboard Coupons 

The Typed.js library is really easy to use. I compiled 8 simple examples for the community to use in their projects. To use it you only need to do the following:

1. Copy and paste the code inside home settings. 
2. Add the class to any text
3. Publish your project

Sign up for the lesson: http://www.webflowtips.com/b/how-to-add-a-typing-effect-to-text-using-typed-js

P.S Like or follow if this was useful for you 🙂 🙌

8 Typing Effects 

The menu from minmum.studio is super fun so I decided to recreate something similar in Webflow. To create the sound effect I used the same technique used on my previous clonable https://www.webflowtips.com/b/how-to-add-audio-sounds-to-buttons

All the other animations are done entirely in Webflow.  

Two important things:

1. Make sure you publish the project for the sound to work.
2. Remember to host the audio file in your own server. The file used in the clonable will be removed, so if you use it for your own project it probably won’t work :(

Sign up for the lesson: http://www.webflowtips.com/b/how-to-animate-a-menu-button-with-sound-effect

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

 Menu with Sound Effect

Inspired by trycoffee.co , here is a button that reveals and hides a couple of icons when you hover over it. 

It was a bit tricky to get the animation to feel right but managed to make something similar. 

Details:

✔ Animations using Webflow
✔ Client First v1


Sign up for the lesson: https://www.webflowtips.com/b/how-to-animate-a-button-that-hides-and-shows-icons

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Button Hover Shows / Hides Icons

Here is my take at building something similar to gusta.studio 's header and navigation (which are 👌). I used a Webflow slider instead of the background video. They are by no means the same, but they give you an idea.

✔ Webflow Slider
✔ Animations using Webflow
✔ Client First v1
✔ Custom CSS (to create the logo’s dropshadow)

Photos: Pexels

Sign up for the lesson: http://www.webflowtips.com/b/how-to-animate-a-slideshow-and-menu

If you have any questions feel free to comment.

P.S Like or follow if this was useful for you 🙂 🙌

Webflowtips

About

Skills

About

About