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

You can easily animate a number counter like the Pros do! To do that you only have to:

1) Add a class to the number you want to animate 
2) Copy and paste the code in the "Settings > Before body Tag" 
3) In the code change the name of the class to the one you used (classes start with a ".") . 
4) Modify the parameters that work for you (start, end, duration, delay, true, repeat, decimals, currency, separator) 

*Repeat this process If you have different numbers with different parameters (check the clonable for an example)
** Remember that this will only work on published sites. 

Sign up for the lesson: https://www.webflowtips.com/b/how-to-animate-a-number-counter

If you have any questions feel free to comment.

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

10 of 50

Webflowtips - Animated Number Counter

How to animate a number counter?

También

An other type of scroll animation, the title will change when the image is on a view

Webflow Tips N°14 : Scroll Animation

You can also improve your portfolio by adding an animated progress bar in just 10 minutes.  Simply modify the width % to your preferred number. 

Sign up for the lesson: http://www.webflowtips.com/b/how-to-animate-a-progress-bar

If you have any questions feel free to comment.

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

9 of 50

Webflowtips - Animated Progress Bar

How to animate a progress bar?

4 - Hover Pop Multiple Images

Snack N°4 : Multiple images hover effect

Lateral menu animation on click 
Tutorial : https://www.youtube.com/watch?v=JIoc4GTE_DQ&t=14s&ab_channel=Tambi%C3%A9n

Webflow Tips N°13 : Lateral menu animation

Background color will change when you scroll on another section

Webflow Tips N°11 : Background scroll color

Infinite scroll

Tutorial : https://www.youtube.com/watch?v=yuVPeD7A9Hc&ab_channel=Tambi%C3%A9n

Webflow Tips N°12 : Infinite Scroll

Hover animation and click animation, the image will scale in a different way

Webflow Tips N°10 : Click & hover animation

The image will change depending on the cursor placement

Tutorial : https://www.youtube.com/watch?v=2kIX6h2mIkM&t=2s&ab_channel=Tambi%C3%A9n

Webflow Tips N°15 : Mouse Hover Animation

Toggle to switch between dark mode and light mode

2 - Dark Mode Effect

Snack N°2 : Dark Mode Effect

Screen loading animation when you arrive on a page 

Snack : https://www.youtube.com/watch?v=3KB0bmENy50&ab_channel=Tambi%C3%A9n

1 - Loading Animation

Snack N°1 : Loading animation

Similar to my post on how to reveal text, here is a SUPER simple way to make icons reveal in different directions inside a container.

In this clonable you can see them triggered on load and on click

Feel free to  use it for buttons or anywhere you see fit.

Sign up for the lesson: http://www.webflowtips.com/b/how-to-animate-icons-that-appear-in-different-directions

If you have any questions feel free to comment. 

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

25 of 50

Discover webflowtips websites built by the Webflow community

Discover webflowtips websites built by the Webflow community