Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

SVG Graphic not overlap

Recommended Posts

Hello TirochH, and Welcome to the GreenSock forum!


That is a lot of code to go through. This is more of a CSS question than a GSAP related question ;)


But, the reason the svg's don't overlap is because the <svg> element has a default CSS position property value of static. So you would have to use CSS position:absolute to have them overlap.


See the Pen OmxaJo?editors=0100 by TirochH (@TirochH) on CodePen


svg {


CSS position property: https://developer.mozilla.org/en-US/docs/Web/CSS/position



  • Like 3

Share this post

Link to post
Share on other sites

Now I reduced my code   again.


I have insert always 'absolute'. Nothing change as I want.




PS: I add     this also direct in CSS. You are right.

Than it is O K:

But I want use it without CSS: How I insert the identical in javascript?

Share this post

Link to post
Share on other sites

You still have a lot of code in your example. Can you please reduce your codepen demo to only the issue you are having.

  • Also can you please be more specific in how it should be the way you want?
  • And what is the specific GSAP question you have?


  • Like 2

Share this post

Link to post
Share on other sites

I'm a little confused too. It all looks right to me. 


Just an FYI - you're using an old version of GSAP (1.18) when you should be using the latest (1.19.1). You've also got an old version of snap (0.4.1) while the latest version is (0.5.1).


Happy tweening.


  • Like 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.