Next button Animation

[buster808 10 Likes (Newbie)]

Hi,

Ive created a drawsvg animation with text and next button and want the next animation to start in same position.

Ive tried using display none with no joy.

I have hidden the second animation I wish to start in css file.

 

I have used a css framework UIKIT so I change position for mobile.

 

Thanks for any help.

See the Pen NWMzdOM by buster808 (@buster808) on CodePen

[Rodrigo 5,914 Likes (Superhero)]

Hi @buster808,

 

Basically  this has to do with CSS. Just wrap your SVG elements in a container that has a position relative and give your SVGs a position absolute:

<div class="svg-container">
  <svg id="soldier-man" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 614.99327 728.50494"></svg>
  <svg id="bin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1235.38 785.72">...</svg>
</div>

.svg-container {
  position: relative;
}

.svg-container svg {
  position: absolute;
}

Probably you'll have to tinker with some styles and positioning, but hopefully this is enough to get you started:

See the Pen NWMzgzY by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[buster808 10 Likes (Newbie)]

Thanks Rodrigo