Jump to content
GreenSock

Hugh Nivers

Can't Target SVG Elements

Recommended Posts

I go to the Greensock Docs and find a piece of code like this:

 

TweenMax.set([obj1, obj2, obj3], {x:100, y:50, opacity:0});

 

I then take it over to my CodePen and use it as described, changing the properties I want to animate. It then doesn't work.  Nowhere in that section of the doc does it talk about exceptions for SVGs. Is there a difference? What am I missing?

See the Pen QrQaXN by hughnivers (@hughnivers) on CodePen

Link to comment
Share on other sites

You have an error in your code. You've added a listener to the bar0 element, but the go() function doesn't exist.

 

bar0.addEventListener("mouseover", go);

 

Other than that, your selectors are fine and the SVG elements should animate correctly. You could also target the elements like this:

 

TweenMax.set("#bars rect", {transformOrigin:"center bottom", scaleY: 0.01});

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Yup, PointC is exactly right. To see if animations worked I just got rid of the unnecessary code (eventlistener and circles) and put in a to() tween for the bars.

You should be good to go.

 

See the Pen NMyYry?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

2 minutes ago, PointC said:

You have an error in your code. You've added a listener to the bar0 element, but the go() function doesn't exist.

 


bar0.addEventListener("mouseover", go);

 

Other than that, your selectors are fine and the SVG elements should animate correctly. You could also target the elements like this:

 


TweenMax.set("#bars rect", {transformOrigin:"center bottom", scaleY: 0.01});

 

Happy tweening.

:)

 

 

Thanks. I didn't realize that not having the function yet would break everything else. I commented it out and everything worked. Thanks for the pointer on targeting. 

Link to comment
Share on other sites

Yep, @PointC and @Carl are right, of course. Also, one minor note: you're linking to the "/latest/" CDN directory which (strangely) is way out of date because CDNJS refused to support it years ago. So I'd recommend linking to /1.20.4/ (the actual latest version) :)

  • Like 4
Link to comment
Share on other sites

2 minutes ago, Carl said:

Yup, PointC is exactly right. To see if animations worked I just got rid of the unnecessary code (eventlistener and circles) and put in a to() tween for the bars.

You should be good to go.

 

See the Pen NMyYry?editors=1010 by GreenSock (@GreenSock) on CodePen

Thank you for taking the time to demonstrate the animation. That helps. I appreciate it.

 

 

Link to comment
Share on other sites

Happy to help... and so was everyone else by the looks of things :mrgreen:

  • Like 4
Link to comment
Share on other sites

4 minutes ago, Carl said:

Happy to help... and so was everyone else by the looks of things :mrgreen:

 

I'm also here to pad my stats. @Sahil is charging towards his membership in Comma Club and @OSUblake came back last night with one of his answer tornado sessions so I'm just trying to keep up with the cool kids. :lol:

  • Like 1
  • Haha 3
Link to comment
Share on other sites

6 minutes ago, GreenSock said:

Yep, @PointC and @Carl are right, of course. Also, one minor note: you're linking to the "/latest/" CDN directory which (strangely) is way out of date because CDNJS refused to support it years ago. So I'd recommend linking to /1.20.4/ (the actual latest version) :)

 

Thanks. What's the easiest way to get to the best version? I'm just typing in TweenMax and accepting what CodePen gives me. 

Link to comment
Share on other sites

2 minutes ago, PointC said:

You can go to the home page and hit the download button or you can bookmark this page:

 

https://cdnjs.com/libraries/gsap

 

Happy tweening.

:)

 

Bookmarked. Thanks.

Link to comment
Share on other sites

Also - if you want to use Club plugins on CodePen, this is another one to bookmark. 

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Quote

I'm also here to pad my stats. @Sahil is charging towards his membership in Comma Club and @OSUblake came back last night with one of his answer tornado sessions so I'm just trying to keep up with the cool kids. :lol:

 

I was on a mission to win 7 days straight, had to give up all hopes when I saw Blake online today. Looks like I will have to start over again someday.

 

Still 2 more to go, if anybody has 10 questions please post them today when none of mods are online. :D

  • Haha 5
Link to comment
Share on other sites

Hi @Hugh Nivers you are right it looks like CodePen gives /latest if you do a resource search but it gives the /1.20.3 if you use the Quick Add drop-down

 

https://greensock.d.pr/zOhm9x

 

 

  • Like 2
Link to comment
Share on other sites

Nice detective work Professor @Carl. :)

 

I've noticed quite a few demos/questions using /latest/ and was curious why that was happening so often. I wonder if CodePen could change that?

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.
×