Jump to content
GreenSock

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

Positioning absolute element

Recommended Posts

Hey guys,

 

I got an animation with position absolute this circle scales from 0 to 1 then the real circle  comes behind it and then the fake circle disappears.
Problem is the position absolute. Is there a way to fix this?

when i zoom in or out or view on a different size screen you see the element jumping to another place

 

 

Also for some reason i am not fully able to control the tl.set property. for instance when i remove the fade in label with the attached tweens. All of it doesnt work anymore. And i don't understand why.

See the Pen gXxygK by timdt (@timdt) on CodePen

Link to post
Share on other sites

Hi @timdt,

 

Please use CodePen in the 'correct' manner: separate HTML, CSS, JS codes.

It´s easier to analyse.

 

Thanks

Mikel

  • Like 3
Link to post
Share on other sites

Hey @timdt!

 

I see the a couple of people has mentioned this to you so, I thought I'd repeat it here in a bit more detail.

 

CodePen does a lot of the setup for you and is designed to make coding little snippets super easy.

 

In the HTML tab, you only need to add what goes inside the <body> tag. There's no need for anything else.

 

The CSS and JS tabs, as their names imply, you add the CSS and JavaScript, you can use SASS, Babel and a bunch of other precompilers and/or other useful tools.

 

When you need to add an external library, like, GSAP, click on the settings button on the top right. It will open a modal window. Head to the JavaScript tab in the modal and look at the bottom, there's a dropdown 'Quick-add' button. There you can set a bunch of other options. But you really won't need to change anything you don't want to try. 

 

As for your question, I think you are trying to do a bunch of things at once but are a bit lost in the details.

 

You have two SVGs and one wrapper object. Your wrapper object is set to be 1000px wide and high. One of your SVGs is 500px wide and high. It is also absolutely positioned while the other SVG has no set width and height but has a viewBox of "0 0 1366 768". Effectively, the two SVGs are of different sizes. And since you have on absolutely positioned, it will sit on its position relative to the first parent that's doesn't have a 'static' position.

 

In order for you to make sense of what's going wrong here, you need to understand how SVG scales and how elements are positioned with CSS.

 

https://css-tricks.com/scale-svg/

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

  • Like 4
Link to post
Share on other sites

@Dipscom Hey thanks for the reply, yeah its just lazyness ( i apologize ).  Yeah i get it. the one is relative and the other is absolute. 
i should give a static width and height with position absolute in the wrapper to both elements and then position them correctly so they both are of the same size and share the same position styling. I dont't know much about the <svg> element so thought the problem was in there somewhere. But now it makes sence. It just new to me with the id's classes and elements that come extra with working with svg.

 

Thanks for the resources don't know how to thank you guys enough.

Will pay more attention before asking questions next time.

 

Have a nice evening for now everybody
 

 

  • Like 2
Link to post
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.

×