Struggeling with CSS Animations in Webstudio

At a glance

A community member is struggling to implement CSS animations in Webstudio. They have provided the animation code they want to use, but it is not working when they try to paste it in the Project Settings custom code. Other community members suggest trying the animation on Codepen first to ensure it is working correctly, and then investigating why it is not working in Webstudio.

After some back-and-forth, the community member finds that the key is to use the Custom Code component in the body, rather than trying to add the code in the Project Settings head. They plan to create a tutorial to share this solution with the community.

Useful resources

ppaso_sb

Hi guys,
i am struggeling to implement CSS Animations in Webstudio. It should be so easy, but i cant find out where i am going wrong.
This is the Animation Code i want to use.

<style>
@keyframes appear {
        from {
          opacity: 0;
          clip-path: inset(100% 100% 0 0);
        }
        to {
          opacity: 1;
          clip-path: inset(0 0 0 0);
        }
      }

      .block {
        animation: appear linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
      }
</style>

Shouldn't all the elements where i set the CSS Class to "block" now be with this animation?
I Tried to paste this code in the Projekt settings custom code, but it didn't work. Is it the wrong place?

Much apprechiate the help 🙂

15 comments

OOleg Isonen

have you tried implementing it on codepen to make sure you have the animation done right and exclude webstudio out of equation?

ppaso_sb

yes. I've tried it on the very Basic level.
Blank site, using animate.css
Implemented their code to load in the Projekt settings and set a class for the element. Still not working.

Example URL: https://animation-test-5ley6.wstd.io/

Head code:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>

Class name: animate__fadeOutUp

Code Source: https://animate.style/

So i cant find a working way to use css animations.
Is the way to set the custom code wrong maybe?

OOleg Isonen

did you add your library via head code? then it won't work on canvas, only on published site. Use project settings scripts only for analytics and similar

OOleg Isonen

can you create a codepen with exact same animation and show its working before I dig in why its not working in webstudio?

OOleg Isonen

if you want my help please share a working codepen + share webstudio project

OOleg Isonen

I will check the difference and can tell whats wrong

ppaso_sb

i got a solution together with John.
i think I'll make a short tutorial for the community tomorrow 🙂

OOleg Isonen

nice!

OOleg Isonen

what was wrong in the end?

ppaso_sb

i tried to place the CSS and HTML Code in the Projekt Settings <head>, which didn't worked.
Using the Custom Code component in every body is the key point.

OOleg Isonen

made this issue, its not the first time its not clear https://github.com/webstudio-is/webstudio/issues/4001

OOleg Isonen

would a more clear description/warning help next to the head code area?

ppaso_sb

would have helped me to make it more clear, yes 🙂

mmihx

Tutorial would be awesome! 😄

JJohn Siciliano

see this update for more: https://discord.com/channels/955905230107738152/1182292163317477436/1281391735406329889

Add a reply

Join the Webstudio community

Struggeling with CSS Animations in Webstudio