I’m not understanding webflow’s interactions model. I am trying to create a simple animation to move svgs across the screen on page load. I’ve already prototyped this in html/css and it works beautifully. I have a base animation I’ve created with keyframes:
@keyframes data-motion {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(110vw);
opacity: 0;
}
75% {
transform: translateX(-110vw);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
I then use the animation property to apply to all the elements I want animated, and use a utility class to individually set the animation-duration on each element (I want them all to execute the animation at slightly different speeds).
I’m trying to recreate the animation using webflow’s interactions panel but I’m confused about whether or not what I want to achieve is possible. Because each webflow “keyframe” only supports one property, it seems like a cumbersome process to stack an opacity animation and a “move” animation on top of each other at the same time mark. Also, because webflow’s “keyframes” seem to be denominated in seconds, rather than percentages, it seems that I wouldn’t be able to apply the same animation to multiple elements with individually set animation durations. Do I have to create a new animation for every different speed I want the animation to execute at?
Also, I’ve tried creating the animation the webflow way on just one element, and when I preview it it’s extremely choppy. Are these “keyframes” actually being implemented by .js in a way that’s causing lots of repaints between frames? Or is the fact that I have two properties being animated on the same element at the same time causing webflow to repaint the element multiple times per frame?
I’m fairly new to webflow so I’m trying to be positive and assuming that I just don’t know how to do this correctly the webflow way. But I have to say it’s disappointing that webflow seems to be reinventing the wheel here. How many countless developers contributed to making css animations/keyframes animation the well oiled machine that they are? Why use absolute timing instead of percentages for keyframes? Why allow only one property per “keyframe” instead of multiple properties?