How does one create an interaction? There are two pieces: triggers and animations. A trigger—like a click or a hover or a scroll—is what starts or continues an animation. In this lesson, we go into the two types of triggers, as well as an overview of the animation timeline.

Steps in the video:
00:00 – Introduction
00:14 – Trigger selection
01:13 – Animation timeline
———-

Get started with Webflow:
https://university.webflow.com/courses/webflow-101-crash-course

http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

source

16 Comments

  1. He says, when trigger A, move B, can someone point a video tutorial about this? I mean there is a panel, where you can chose selected element, class, etc. in what video it is explained?

  2. love this video, but i hope you can cover it in more detail, like from the beginning, step by step, right now i have 2 image, 1 sit ontop of the other image, i can animate img A but then when i animate img B, img A went disappear….which i don know even what is the problem…. anyone can help out?

  3. Another very useful video, thanks. What caught my attention was the layout of the worlds "let's go outside". How were the words "let's go" put behind the mountain and "Outside" infront of the mountain? I initially assumed the image was a background image, but it since "Let's go" is behind the mountain there are surely more tricks applied to get this effect.

  4. Maybe you should also create a real support for troubleshooting. Animations randomly and very often going off for no reason. Your topics are full users experiencing this and no effective support on it. I am expecting from a paid a service nothing like this.

  5. He says, when trigger A, move B, can someone point a video tutorial about this? I mean there is a panel, where you can chose selected element, class, etc. in what video it is explained?

  6. why arent the interactions on scroll etc not as smooth as custom websites ? there seems to be lag and they are not smooth and bit rough on webflow , giving that template style look..be it parallax effects, animation on scroll etc.. is any any better way to make it smooth ? as in to design in AE and bring them over to webflow ? or am i missing something in webflow to get those smooth effects?

  7. Hi everyone!
    I’m new to Webflow, so that’s why I am currently doing all the beginners tutorials I found on Webflow University.
    Actually I’m trying to make the same effect that the one on this video, to practice and to have a better understanding of all the functionalities that Webflow is proposing: https://www.youtube.com/watch?v=-U0IXSmp6kc 2 : trying to make text animations pass below a .png image.
    So about the animation I almost understood the way it works, but about the fact that the text will go below a file .png I don’t know what to do. I do not even now if the fact to create a .png and to upload it is the thing to do but I supposed : I tried during 6 hours today. I also tried to put my text before and after my image but none of this is working.
    And like i am writing my problems here I also have one about the text size : I can choose any type of text (paragraph / heading / text bloc / …) I will never be able to modify his size because of the “All body pages” that is blocking it and I can not found where it is to modify… That is why the size of my text is as little as that.
    If somebody could please explain me all the wrong things that I am doing it would be really nice. I am more than motivated but now I just can’t think anymore I got the feeling that I tried all the things that came to my mind…
    Thanks a lot and have a nice friday. And sorry about the faults I am not an english native.

    Here is my site Read-Only: https://preview.webflow.com/preview/welcome-to-seoul?utm_medium=preview_link&utm_source=dashboard&utm_content=welcome-to-seoul&preview=6319bec848f103016871d3af4f80615a&mode=preview
    Could someone help me please ?

Leave A Reply

Please enter your comment!
Please enter your name here