This post is an introduction on how to make simple animations in using Interactions 2.0 which are the new way of doing things in .

1. You need to create an account in Webflow to continue this tutorial.

2. When you are all set go to Dashboard, there you will find all your projects, deployed or not, and to create one click the blue button on the right side of the screen. It will request a name for your project, in my case I used “Practice for animations”.

3. Meet the Designer, in this part you will put all your HTML components together to create your website. On the left side, you have all the HTML components like Sections, Containers, Div Blocks, and so on. On the right side, you can change all the CSS of each component.

For example, you drag and dropped a Section, then added the class of “Main” with a height of 300px.

Congratulations! You created your first Class!

4. In the Components part grab a Div Block, this component is very versatile and actually I use this more than other components, you can create Flexboxes with it, use them as a custom container and so on. I added some CSS so it looks cool.

5. Now the fun starts. Go to the top right button, is a lightning, that’s the Interactions icon so get familiar with it!.

6. Now a weird screen will appear on the right side, here you have some options: Element Trigger and Page Trigger.

Element Trigger: This interaction is called when an element changes, for example, when you click a button, submit a form, open a tab, you get the point right? So this trigger is very useful for all User Experience and Feel of the website.

Page Trigger: This interaction is simple, it’s called when something related to a page is changed, for example, scrolling, on load, after load, before load. Usually scrolling and on load are the most used.

7. What I did is a simple moving ball so in the section of “When Page Finishes Loading” I clicked the plus button in Timed Animations, added a name and clicked the other plus button and selected “Move”. After this, you can select which component you want to “Move” and where, how long will it take and the Easing (CSS animations property). Then you only need to move it or do whatever you want with this ball and then click the loop button.

Source link—-eb297ea1161a—4


Please enter your comment!
Please enter your name here