Webflow: Design Slider Animation (Part 1)
In this article, you will learn how to design slider animation with Webflow without using codes and JS libraries!
After publishing several articles for Figma fans, it’s time to switch to Webflow to learn something new. Webflow is one of the best web design tools and if you like or not, you must learn it very soon because, in future, it would be a norm for designers to design real websites on tools such as Webflow.
Before we start, you must learn these terms:
1- Div Block
2- Container (I don’t use containers for most projects because you can achieve the same effect with Div Blocks)
3- Heading Style (H1, H2, …)
4- Animation Panel of Webflow
5- Tags Section (Webflow)
We are going to design this animation on Webflow (You can clone the project):
- I found this layout on tympanus website.
To achieve this effect, you must know we have to keep the animations separated. That’s how we work when we are working on complex projects! We have 3 animations:
