Webflow Launch IX3!! (Interactions)

I think it's going to change the game again. Now you can not only create like richer animations, but also like easier. Web flow animations. They're rolling out right over the next month. They're going to be rolling it out. Have you got access? I just checked. I don't have access. But it's a thing we've been after for a long long time, which is horizontal animation timeline thing. But it's very reminiscent of our old boy uh Pine Grow, which with a kind of OG GSAP timeline editor, but I'm really excited. Yeah, it's super cool. Like you can create more complex animations much easier, especially when it comes to animating text. Like previously in Web Flow, it was really difficult to animate text. It was easy but it was time consuming because you had to animate you know letter by letter. But right now you can just, you know, use the GAP uh text split which all is included for free. And I think it's going to help us create like also better performing uh websites with a lot more animations very customized and also accessible because web flow is um actually going to tackle accessibility as well with GSA. I think they talked about uh the reduce motion. Oh yeah, I yeah because I think that's the thing built into GAP. Have you I mean have you seen the UI? I'm just loading it up now. Yeah. So this is how the panel is going to look like. What we have here is this interaction icon. Then we have our canvas and then on the right side we have the controls and in the bottom we have the timeline where we see different elements being animated like different animations. So we see here a text animation with stagger as you see we have a preloader we have logo move up and if we play this you see how this works. So you can literally drag things and play the animations and you see how nice it is the text here you see how it is animated like word by word. So previously you couldn't do this uh without code and just in one go. Now you can do it in just literally one go. Here on the right if we look at this uh closely we have the trigger but also the target. The target is like are we targeting a class or an attribute or an ID? You know a bunch of like different targets that we previously didn't have access to. And then here you have the properties that you can animate from height to size and you know to transforms but also class. So you can actually toggle add or remove a class. I'm looking for something that allows you to change HTML values or attributes because this is the thing that I my video that got big a while ago was talking about how the interactions panel is not accessible. you're if you're going to animate something in like a popup or something like that, you need to change values to to let accessibility user know that they've just opened a modal and that the menu is open and that there's this there's a drop down and things like that. So, that's what I'm keen to see. That's what I'm I'm wanting to see. But overall, you know, the some of these examples look pretty cool. They get they released three examples, didn't they, from some people who've had early access and they've done some a few nice things, but it's uh you know, you expect nothing less really, do you? I think it's going to change the game again, especially comparing Web Flow to Framer and a bunch of other tools. Now you can not only create like richer animations, but also like easier like I really want to emphasize on this point. There are a b there are a bunch of pre-made animations and you have an animation kind of like library system where you can just make an animation let's say for text and then you can apply this to other things like previously you had to match the class like a bunch of things. Now you can just have like one class and then say whatever children that exist within that class stagger them and it just works. This what you see here, we did this manually. Like I went in and took each letter and literally like turned it into a span and then animated that in individually. All of these are animated individually. Painful. Right now I could probably make this with just Yeah. two different animations. Yeah. Just build the animation with a class attach it to a class and just apply it to those pieces of text. Right. Yeah. Yeah. That's it. This is part of a larger conversation on my show, Command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter.