Leaderboard

You can add rects as child element to svg rather than embedding svgs. Not exactly sure what you are trying to do(plus I am in hurry) but this should be close and will give you ideas. Also note that svg spec doesn't support 3D transforms so rotationX and rotationY won't work in all browsers.

Adding your SVG via <img> element will prevent manipulation with JavaScript. You can get some control of it with CSS, but it has to be part of the SVG code. External stylesheets won't work on the nested elements. You'll have the most control and options by putting the code inline. That being said, we have had some discussions about injecting the code. Here are a couple threads that may be of interest to you. Happy tweening.

On first click JinJang rotates to 360, on second click because it is already at 360 it won't animate anymore. try '+=360' but fast clicking will mess up your animation, in that case you fromTo tween and animate from 0 to 360. TweenLite.to(JinJang, 6, { rotation:'+=360', transformOrigin:"center", ease: Power0.easeNone, repeat:10 }); //or try fromTo tween TweenLite.fromTo(JinJang, 6, {rotation: 0}, { rotation: 360, transformOrigin:"center", ease: Power0.easeNone, repeat:10 });

Hi @beau_dev Welcome to the forum. I'm not 100% sure what you need to happen here, but @Sahil is exactly right. The SVG spec doesn't support 3D transforms. You can animate 3D transforms on the whole SVG. So you could loop through and create all the SVGs or make clones and then animate any of them on any axis, but nesting the elements as children of one SVG won't give you access to x/y rotations. Hopefully that helps. Happy tweening.

@PointC was about to tag you.

Also I forget to say, if Greensock did a lightweight scroll trigger plug-in specifically for Greensock and had it as part of one of the paid memberships i think they'd make a small fortune.

Hi @hanslibuzli, Life is a compromise. It depends on what your focus is. I am neither a coder nor an expert - its just for fun. Kind regards Mikel

Hi, Sure, I do not know what you want to achieve with the construct, so here's just a simple test: Kind regards Mikel

This is what I thought. Thanks for the confirmation PointC...it's much appreciated.

Hi @ZAJDAN I think you're looking for the CSSPlugin docs. Check the section about 2D transforms. https://greensock.com/docs/Plugins/CSSPlugin Happy tweening.

Howdy, @kpendic. Thanks so much for asking. It shows that you want to do the right thing which means you're exactly the type of person we like to serve. If you don't need any of the bonus tools (like SplitText) and you're not charging multiple customers, there's no need to join Club GreenSock. You didn't really mention what you're using this for, so that's tough for me to determine. Also keep in mind that SplitText does a LOT more than lettering.js, but you very well may not need any of those extra features. I just wanted to make sure you knew that it's a far more advanced tool. Happy tweening! Let us know if you need anything else.

Not in any easy/automatic way, no, but you could try to graph it out in the Ease visualizer and trace it using only 2 control points and see how close you can get it (cubic-bezier() in css is limited to 2 control points). And again, it'd be different based on the starting/ending scales, so you can't make a universal one. Have you tried setting will-change css property in Chrome (not just to the mask, but the masked content too)? It's somewhat dangerous (https://greensock.com/will-change/) but might be worth trying. Masking is just inherently CPU-intensive (unrelated to GSAP).

Hi Thanks PointC. I have normally used scrollMagic for such things. I was perhaps getting ahead of myself and thinking I'd found a simple solution for such a basic use case. I should realise by now seemingly simple things are never simple. I'll have a look at the sectional observer article as well, I think i have seen an an Intersection Observer library by the guy who wrote that article. Thanks again, Paul.

Actually, the goal is to avoid two x points with DIFFERENT y values. Remember, the x-axis represents the time whereas the y-axis represents the value. So it wouldn't make sense to have two completely different values (y) at exactly the same time (x). Make sense?