the answer for all question about Oxygen Builder plugin and WordPress

I’m having trouble animating an SVG in Oxygen. Works fine in CodePen.


I’m having trouble animating an SVG in Oxygen. Works fine in CodePen.

I’ve got an SVG created in Illustrator which I’m trying to animate using the CSS “stroke-dasharray” property, like this:

I’ve pasted it in a Code Block and applied the same styles to it as in the CodePen via a stylesheet.

#brand-doodle svg {
width: 400px;
stroke-dasharray: 1100;
stroke-dash-offset: 1100;
animation: line-anim 8s ease forwards;
}

@keyframes line-anim {
to {
stroke-dashoffset: 0;
}
}

But I can’t get the animation to work, the “dasharray” values don’t produce the same results – no matter what value I put in they never completely hide the SVG, which is essential. At some point they actually reverse and start building the SVG back up.

Any idea what am I missing?

Thanks!



Source

Leave A Reply

Your email address will not be published.

Oxyrealm Docs