Responsive Animations: Scaling Vector Graphics Issues

I am having issues with scaling a combination of vector graphics and text.

Although I am able to use a combination of scaling vector graphics, placed in containers, then stacked, then placed in a container next to font in a container, and then stacked on other font in containers. It looks great and animates correctly on desktop size at 100%, But, when I scale it down by dragging my screen, everything becomes jumbled and out of place.

Is there a type of “easy” scaling for these types of more complicated animation combos?

The design, is a political sign featuring the candidates first name, last name, a sun over a mountain vector, and the desired office. It goes in this sequence…

First name fades in.
Last name fades in.
Mountain wipes upward.
Sun shapes from circle to visible.
Outline of sun falls onto sun and mountain.
Office title reveals, completing the animation sequence.

The reason I wanted to use text instead of the vector graphic of the text, is that it can be selected and read for accessibility reasons.

Am I overcomplicating this process when I should just use alt text? Thanks.

Product:
I am using Wix Studio, I am trying to create an animated graphic with selectable text. I have tried a wide combination of stacks, containers, and the different types of responsive selections for the items. Along with locking them to varying points to keep the correct ratios. Is there like, a simple multi-animation option for vectors? Let’s say you have a noodle bowl logo, with the word “ramen” below. You want the bowl to fall, noodles to rise, steam to fade in, and the word “ramen” to be highlightable. - then you want that to scale correctly on different size screens, but when you do, the different elements with different animations get wonky. - thanks!

What have you already tried:
[Share resources, forum topics, articles, or tutorials you’ve already used to try and answer your question.]

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

1 Like