FeranD

khm.... sorry. mistake as in 80% cases with me is in my bad attention.... i actually had custom styling on those elements. styles were g { transition: .5s; transition-timing-function: ease-out; transition-duration: .5s; } why do those styling interfere and influence gsap animation as when page loads elemets are not in hover state ?

Also, another strange thing to me i found is : On Animation CodePen or GSAP adds style="transform-origin: ..." and transform to animating element But in my project i see this attributes on animated svg group: <g style data-svg-origin="data-svg-origin="43.60000228881836 1.6999988555908203" and it moves in opposite direction.... setting x: -150 and from method moves element from right to left... instead of expecting left to right

Hi, everyone. Really sorry for creating another svg ask thread, but i am stuck to find a way out I won't place a codepen URL here since on codepen all works fine, making it even harder for me to find error. Codepen renders svg + js code together in SVG shadow root so may be that's the case for me. However here is a details. I have a django project where i put svg code inline that has 'g' groups with id's. These 'g' groups animates on hover well via CSS rules. But anyway trying to access it via GSAP makes no difference. No error in console. No animation. I can only animate outer svg tag by getting it via id. So my svg code is inline and included in django via {% include 'svg-inline.html' %} - it just prints in <svg ...> .... </svg> into my template that renders fine. I script-scr TweenMax and CssPlugin in head of my page and call animations on document load - $(function() {gsap animation}) Animating any other tags works good. One strange notice i get: if i put GSAP code into script tag in 'svg-inline.html' before closing </svg> it works , BUT ! with some groups only.... i really don't understand Here is a CodePen anyway... It all works good there. I don't have any additional svg styles in my site, anyway i can't imaging what style could lead to such behaviour.

Hey, guys. Thx for a good pleasant welcome. I've scratched a very very simple example illustrating my problem - https://codepen.io/antongrekov/pen/JjPWRQK Before animation completes you may notice a horizontal scrollbar on the bottom. That overwidtrh breaks my mobile layout and makes my header stretchen full-width and display incorrectly, also it makes a gray vertical line appear right to all website. overflow: hidden on body or html is not a solution for me cuz i need a vertical scroll on page. I may apply overflow: hidden on section with that animation but i also don't like this solution(what is section is big or it suppose vertical scroll on some elements). Perfect solution would be something like autoAlpha but with display: none before animation, or applying a position: absolute to animated element

So, i need something like autoAlpha but working with display: none, so elemets that has {x: 100} (moved out of screen and breaks mobile layouts) and have not yet been triggered by ScrollMagic to come to their in-width places will be out of flow and not break layout. Hope you understand my Russian-English, sorry

I am using GSAP for last 3 weeks and, first i'd like to say, its and outstanding, great tool. Thanks a lot and cheers cheers to developers. I have a simple animations using .from method with {x: or y:} properties changes. Problem came out when i started to look at my website in a mobile Firefox layout. Some elements have {x: 150} with a .from method and a ScrollMagic (triggerHook: "onCenter") appearance. I guess that keeps them 150px to the right from its original position. And that behaviour largen my screen and breaks layout making an ugly vertical line to appear (same as when u try to resize screen to a smaller size with some fixed width elements, you know what i mean :)) How do i fix this ?