Share Posted November 15, 2017 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 comment Share on other sites More sharing options...
Share Posted November 15, 2017 Hi @timdt, Please use CodePen in the 'correct' manner: separate HTML, CSS, JS codes. It´s easier to analyse. Thanks Mikel 3 Link to comment Share on other sites More sharing options...
Author Share Posted November 15, 2017 @mikel Apologies, i have modified the codepen and now it is correct. See the Pen gXxygK by timdt (@timdt) on CodePen Link to comment Share on other sites More sharing options...
Share Posted November 15, 2017 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted November 15, 2017 @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 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now