To batch animate svgs do I need to specify width & height irregardless of having given a viewbox?

[sam_tween_journeyer]

Quote

Loading new content but not refreshing

All ScrollTriggers get setup as soon as it's reasonably safe to do so, usually once all content is loaded. However if you're loading images that don't have a width or height attribute correctly set 

From the docs^

 

I need to set a width & height attribute. Does this apply to svgs with a defined viewbox?

 

I've made the viewbox dimensions explicit by setting width="xx" height="xy" on the svg:

viewBox="0 0 576 512" width="576" height="512"

 

I'm not sure if it's something else, but there's a stagger in a preceding animation as the svg animation kicks in and begins to animate concurrently.

 

Given the viewbox dimensions are HUGE, then the svg is resized down by a css class to height: 64px; width: auto, I wonder if setting the width and height is causing excess rendering somehow.

 

I'm trying to eliminate flakiness in animation loading (not loading at all), so I'm working through the steps in the docs. Please advise.

[Cassie]

Heya Sam!

 

Quote

but there's a stagger in a preceding animation as the svg animation kicks in and begins to animate concurrently.

I'm not sure what this means I'm afraid. But if you can put together a codepen that demonstrates the problem you're seeing we can take a look! It's always more useful to show the issue you're encountering rather than ask for feedback on what you think the solution or issue might be. Less backtracking involved for the people helping.

I doubt your setup is causing any issues though, unless you're loading in scrollTrigger before resizing the SVG.

Issue aside, you can just do this instead of setting it and then overriding in your CSS. Think of the viewBox as a ratio and the height as the size.

viewBox="0 0 576 512" height="64"