Leaderboard

Where did you read that was a best practice? Get your money back because there is nothing true about that. <use> elements require more memory and can be SLOWWWWWWWWW to render. http://slides.com/rovolutionary/tuning-svg-performance-in-a-production-app#/ Haven't you've asked about the Shadow DOM before? You cannot, under any circumstance, access the shadow DOM of a builtin, e.g. <use>, <video>, <input>. You can access the Shadow DOM of a Web Component, but you probably shouldn't do that either. They are not designed to be manipulated from outside the component. Summary. Don't use <use> elements unless there is an obvious reason. There are reasons, but they aren't common.

@selfishound When it comes to animation/tweens/motion ... I would choose GSAP exclusively (I know, surprise there ?). What I mean is ... choose one, not two. Also, you're affecting the same property on the same element, which is why it will jump around. So ... I think it would be best to apply one tween to #logo, and the other (parallax) tween to a parent wrapper. That should give you better control. Here is a CodePen illustrating what I'm getting at.

You shouldn't need to worry about GC (well, aside from deleting your own references). GSAP does a sweep roughly every 2 seconds to release animations for GC. My guess is that you're expecting things to immediately get removed, but you need to wait a little time. The browser will determine when it actually wants to do its own sweep, but GSAP will release things on its own typically within 2 seconds after they're done. Does that answer your question?

It's best not to mix CSS transitions with GSAP as it can result in a fight for control of the element. Please remove the transition on line 27 of your CSS and then you can tween the draggable back to 0 like this: const addDegree = () => { TweenMax.to(menu, 0.5, {rotation:0}); }; Happy tweening.

You know, I never got around to checking this plugin out... Shame, shame, shame...

I actually had this happen to me a few months ago and then completely forgot to ask about it. Whoops. I encountered the same thing Carl mentioned. I had DevTools loaded in a pen but didn't use it with create() and I got a double fire of the onComplete. It happens in all modes of CodePen and I just tried it on a regular web page with the same result.

Hi @roblevintennis I made something that might help you out... I've always wanted the ability to select and set an element at the same time. You can kind of do this with jQuery, but SVG has been on jQuery's Won't Fix list since 2009, so I came up with something that was a little more SVG friendly. A selector engine that uses TweenLite.set(). It's only 11 lines of code, and should work in any modern browser. Here's the basics. Using $ returns a single element. Using $$ returns an array of elements. And you can pass in an optional config object just like TweenLite.set() // Returns the first circle var circle = $(".circle"); // Returns an array of all circles var circles = $$(".circle"); // Returns an array of all circles and sets their transform origin var circles = $$(".circle", { transformOrigin: "center center" }); You can check out the code with some additional examples here. http://codepen.io/osublake/pen/JYLyRN?editors=0010 I modified your demo to use it. I tried to set as many properties as possible upfront so your timelines would be a little cleaner, using only .to() tweens. This may or may not be what you wanted, but it's only an example. I also set the transform origins individually, but you could have grouped them together like this. TweenLite.set([checkmark, circle, circleStroke, finger, persons], { transformOrigin: "center center" }); I was thinking about a way to do an alternate default ease by changing the scope of some things, but I didn't want to throw anything super complicated at you, so I just passed the Power2.easeOut as a normal parameter. http://codepen.io/osublake/pen/BKvGgx/?editors=0010

Thanks for the suggestions, Rob. Sounds almost like a cascading way of defining properties. Ha. "Cascading GreenSock" (CGS) instead of CSS.