Join the Webstudio community

Updated 2 months ago

Custom Animation not working

At a glance
The community member is working on porting a website with Webstudio and is having trouble animating an SVG. They have tried embedding the SVG in HTML and adding CSS animation, but the animation is not working. Another community member suggests turning on the hidden HTML embed and wrapping the CSS in <style> tags, which resolves the issue. The community members discuss various use cases for conditionally displaying content in Webstudio, such as for testing and debugging. They also mention an external resource, Ani Motion, for other types of animations.
Useful resources
Hi folks. Working on porting a website with Webstudio to do some performance testing, and I've hit a small snag. Trying to animate a SVG and it doesn't seem to work.

How I went about it is to have a HTML embed into a button, and then another HTML embed with visible=false, where I've added the CSS code that does the animation. However, when I try to bring it live, the animation is not working.

Code for the SVG:
<svg class="svg-area" width="16px" height="16px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(25,25)">
<circle id="core" cx="0" cy="0" r="6" fill="#86CC16"></circle>
<circle id="radar" cx="0" cy="0" r="6" fill="#86CC16"></circle>
</g>
</svg>

Code for the CSS:
body{
font: 62.5%;
}
p {
width: 100%;
font-size: 1.1rem;
text-align: center;

.title {
margin-top: 1rem;
}
}
.svg-area {
display: block;
margin: 0 auto 0rem;
background: #efefef;
}
#core {
fill: #ff4f81;
animation: pulse1 1.5s ease-in-out infinite;
}

#radar {
fill: rgba(#ff4f81, .5);
animation: pulse2 1.5s ease-in-out infinite;
}
@keyframes pulse1 {
0% {
opacity: 0;
transform: scale(0);
}

30% {
opacity: 1;
transform: scale(1.5);
}

60% {
opacity: 1;
transform: scale(2);
}

100% {
opacity: 0;
transform: scale(2);
}
}
@keyframes pulse2 {
0% {
transform: scale(1, 1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(6, 6);
opacity: 0;
}
}

Would appreciate any help that could tell me what I'm doing wrong
M
S
J
13 comments
Could you share a link please?
Turn on the HTML embed you have off (show removes if from the page altogether) and wrap your CSS in <style></style>
Attachment
image.png
and it works
Attachment
image.png
Thank you so much ! I thought that showing just makes it not visible, like in case of styles or stuff
Great! No this is server side hiding... great for conditional content, removing things temporarily, etc... so the user can't even "unhide" them because they aren't in the page to begin with
So it's there basically to help with testing out particular bits of code like say adding analytics to see how it impacts site performance and behaviour ?
Many use cases... here are a couple

  1. for CMS/resources you can conditionally display content... e.g. I use this for pagination... if there are more records than whats shown on the page, display the pager. MANY use cases though
  1. In the builder you can disable things to see what's causing an issue... often used to see which section is going outside the viewport on mobile
I found it to be a good way to inject css animation support since otherwise webstudio doesn't provide support out of the box.
nice! for other types of animations, check out Ani Motion in the marketplace https://youtu.be/gf7jB1-p7kM
Add a reply
Sign up and join the conversation on Discord