Jump to content
GreenSock

buster808

Next button Animation

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thanks Rodrigo

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×