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.
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.
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 ?
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
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