Jump to content
GreenSock

Jonny

Targeting svg layers

Recommended Posts

I am working on a project where i want a timelinelite to change opacity of svg layers.

I've made a codepen above where i am using divs to replace the svg temporarily.

 

when i copy this working code into my project and target the svg <g> instead of the divs here, nothing happens.

 

Question: - My copying might have been buggy, but I am concerned timelinelite won't work with svgs, is this right?

See the Pen rgQPVm?editors=0010 by JonnyPS (@JonnyPS) on CodePen

Link to comment
Share on other sites

You can definitely target SVG with TimelineLite. Did you give your <g> elements the same IDs that your divs are using here? 

  • Like 3
Link to comment
Share on other sites

It's tough to troubleshoot since you have a working demo with divs, but it could certainly be an ID problem. Could you provide a non-working demo with the SVG?

 

Also keep in mind that you can animate SVG properties at the group level and individual child element level. This can sometimes produce unintended results. Say a group has an opacity setting of 0.5 and one of the child elements also has an individual setting of opacity:0.5. That would actually be an opacity of 0.25 for that child. If you then animate the group to an opacity of 1, the individual element set to 0.5 would not animate to full opacity. 

 

But, as I mentioned, a non-working demo with the SVG would help us troubleshoot for you. 

 

Happy tweening. 

  • Like 3
Link to comment
Share on other sites

Hi everyone, thanks so much for the responses.

 

I have now implemented exactly what i want in a codepen and it's still not working.

 

I have linked the codepen here, and on line 36 have included a jquery animate method which animates the svg exactly as i would like it to, but as soon as i comment it out and uncomment the greensock timeline on line 44 it doesn't work, but i know it should because the jquery version works.

 

Any help would be greatly appreciated, the problem seems to be that greensock is not able to target the svg layer in this instance and i don't know why.

See the Pen zQXWVa?editors=1010 by JonnyPS (@JonnyPS) on CodePen

Link to comment
Share on other sites

13 hours ago, geedix said:

I forked your demo and added SVG boxes: 

 

 

Thank you geedix, this was very helpful

 

Link to comment
Share on other sites

14 hours ago, PointC said:

It's tough to troubleshoot since you have a working demo with divs, but it could certainly be an ID problem. Could you provide a non-working demo with the SVG?

 

Also keep in mind that you can animate SVG properties at the group level and individual child element level. This can sometimes produce unintended results. Say a group has an opacity setting of 0.5 and one of the child elements also has an individual setting of opacity:0.5. That would actually be an opacity of 0.25 for that child. If you then animate the group to an opacity of 1, the individual element set to 0.5 would not animate to full opacity. 

 

But, as I mentioned, a non-working demo with the SVG would help us troubleshoot for you. 

 

Happy tweening. 

Hi PointC, valid point, but i have checked and that is not what is happening. I have included a working demo of the final thing that I want in the codepen below.

It would appear jquery can target the element fine, but greensock doesn't?

Link to comment
Share on other sites

2 hours ago, Jonny said:

It would appear jquery can target the element fine, but greensock doesn't?

 

It is targeting it. To animate a CSS property, you need the CSSPlugin, or just load TweenMax as it includes everything.

https://cdnjs.com/libraries/gsap

 

  • Like 2
Link to comment
Share on other sites

Hi Blake,

 

I literally just swapped it out for TweenMax and indeed it is now working.

What threw me off was that there weren't even any errors displaying the console when trying this with TweenLite..... 

Link to comment
Share on other sites

20 minutes ago, Jonny said:

What threw me off was that there weren't even any errors displaying the console when trying this with TweenLite..... 

 

 

It's not an error. GSAP literally added an "opacity" property to the element itself.  Like...

myElement.opacity = 0.3

 

That of course won't actually change the opacity, but there are use cases where you might need to actually animate a property of an element and not the CSS.

 

And your code can be cleaned up by using timeline methods like .to().

https://greensock.com/docs/TimelineMax/to()

 

 

  • Like 3
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.
×