Jump to content
Search Community

Access svg outside.

FeranD test
Moderator Tag

Recommended Posts

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.

 

See the Pen XWJPOeq by antongrekov (@antongrekov) on CodePen

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ?

 

Link to comment
Share on other sites

I'm a little lost about what exactly you're asking here or what you need help with. And it's super difficult for us to troubleshoot blind - if you still need some help, can you please provide a reduced test case that shows the issue? Otherwise we're just grasping at straws. 

 

You definitely shouldn't be mixing GSAP animations with CSS transitions. Remember, CSS transitions kick in ANYTIME a property is changed and since GSAP literally changes the values about 60 times per second, the CSS transition would basically interrupt every time and say "WAIT! Don't make that change quite yet...I'm gonna slowly do that.", thus you get conflicts. See what I mean? I can't imagine a scenario where it'd be helpful to mix CSS transitions and GSAP animations, so maybe you can describe why you did that (what your goal was) and we can help you go in a better direction. 

  • 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.
×
×
  • Create New...