I am trying to animate a text block and button on my home page.
I have made two separate animations that occur when the page loads. However, I can only get one of the animations to activate at a time - I can’t figure out how to make them animate simultaneously. Because the animations are unique (one moves the text up and the other animation moves the button down) I can’t just create a single class that affects both of them.
I’m new to using animations in Webflow, and I’m guessing there’s something simple I’m missing?
You can actually add as many different elements to your “Button Animation” interaction as you’d like, with each of them triggering in the same timeline.
Just make sure you’re in Animation Mode on your Page Load interaction (shown by the blue bar along the bottom of the screen), select your element you want to animate, and add an action like you did with your button. These can be triggered to happen with, or after, any of your other element animations, so it should give you plenty of flexibility. If at any time you accidentally create a transition on the wrong element, just right-click on it in the timeline and choose “Change target”, then select the appropriate element from either the main Designer window or your Navigator panel.
Let me know if you run into any issues and I’d be happy to help out further
Thank you for responding. I understand what you are saying, but that doesn’t address my issue.
Let me rephrase:
In my project I have two separate animations:
[1] “Title Animation” - which affects the text block containing the website’s main header title in the hero section.
[2] “Button Animation” - which affects the red button directly below the title.
There seems to be a white circle on the left side of each animation I have created. The one with the white circle is the only one that animates when my page loads.
I would like to make each of these independent animations play at the same time. Because these animations do different things I have created them as two separate “timed animations”. However, it seems that I may only select one of them to be animated at a time.
How can I get both of my animations to trigger simultaneously?
I figured it out. It’s very simple and something I completely missed.
In the “Page Trigger” tab there is a small “+” icon that allows me to add more animations. I didn’t see it at first glance. All I needed to do was add another page load trigger (which is essentially like adding another Ae layer) and then select which animation I wanted to add. It all works now.
Glad you got it figured out! Just as a note, both methods will ultimately have the same effect—whether your including all element animations withing the same “Time Animation” or including separate “Timed Animations” that all are triggered within the Page Load interaction—it just comes down to preference and use case.
The former makes it a bit easier plan when various elements trigger in relation to one another (but admittedly can get a bit chaotic with lots of different elements being affected), with the latter keeping things separate and it a bit more organized (but requiring timing adjustments to be made within one—or more—different “Timed Animations”).
It’s very possible that Webflow joins these separate animations together when it builds the site anyway, making both methods output similar code, but admittedly I haven’t tested this to confirm. If it doesn’t, I could see combining them into a single animation being the more efficient option for complex animations, but for simple things it probably won’t matter.
All that said, this Webflow University tutorial walks through combines everything into a single “Timed Animation” so I’d imagine this is the desired use with IX2.
Sorry for the rant, but I figured it was worth mentioning. Good luck with the project
Thanks. I’m still learning how everything works. I have a background in Ae so I’m trying to re-learn what I already know within the Webflow UI. I’ll watch that video for sure.
I can see how to add multiple animations to LOAD, but what about CLICK TRIGGER?
For example, I want 1 single click to trigger 2 different events: 1 for mobile, 1 for desktop. I can only choose one. Then combined animations don’t allow me to separate to “desktop only”, for example.
On click, I can’t have a separate animation for mobile, which is a bit frustrating. Why can I stack on multiple animations on load, but not on click?
For animations that differ between desktop and mobile you’ll need to create two separate animations. Typically I’ll just duplicate my desktop interaction (adding “(M)” to the end of the name), modify as needed, and then change the breakpoints that it applies to within the “Trigger settings” dropdown:
Why can I stack on multiple animations on load, but not on click?
All interactions work the same so I’m not sure why you aren’t able to stack multiple animations on click. Do you have a read-only link available?
