[RotateX and rotate center in perspective]

Glad you got what you are looking for.

 

The official SVG spec doesn't actually support 3D transforms at all, so I wouldn't recommend applying them. Some browsers have partial support, but I really wouldn't count on it. This isn't a GSAP limitation - it's simply a browser/spec issue. 

 

Yeah thanks. It's more about experimenting right now.

[RotateX and rotate center in perspective]

Diaco.AW: any chance to spin fan in perspective using only group, not the whole svg?

See the Pen jPPRbM by iroller (@iroller) on CodePen

- it's rotating, but can't make it using the perspective

[RotateX and rotate center in perspective]

Wonderful. Thanks Carl and Diaco.AW

[RotateX and rotate center in perspective]

Hi,

 

Could someone help me to make the fan rotating in perspective? I can make rotation, I can make perspective, but I can't make it rotate in perspective. I thought preserve-3d would help, but looks like I'm missing something.

 

This one is closer: 

See the Pen qddLjL by iroller (@iroller) on CodePen

but still not what I need

See the Pen OVVrpy by iroller (@iroller) on CodePen

[TweenLite drawSVG being slow]

It looks like there are some scripts on your page that are eating up a ton of resources, especially when the page initially loads. Like www-embed-player.js. It's beyond the scope of what we can provide here in the GreenSock forums, but I'd encourage you to dig into using Chrome's Dev Tools timeline to analyze the performance metrics. 

 

Beyond that, though, your animation is demanding a LOT from the browser in terms of graphics rendering (which is unrelated to GSAP). SVG can already be CPU-intensive to render (it has to do all the math for the paths, convert them to pixels, etc.). It's usually best to keep the area of change to the minimal amount. Your animation requires pretty much the entire top portion of the page to get re-rendered on every frame. Again, it's not really a GSAP issue as much as it is a browser rendering one. If you do a timeline recording, you'll see that GSAP's JavaScript execution accounts for a relatively tiny portion of the overall workload, whereas paint and layout tasks are much more significant. Although like I said, when your page starts you've got some JavaScript code that's eating up a TON of resources. I'd definitely investigate what's going on there. 

 

Thanks for suggestions. I'll dig into scripts on my page and try to simplify the SVG.

[TweenLite drawSVG being slow]

Hi iroller 

 

you need to load DrawSVGPlugin.js too in your codepen , and pls try this : 

See the Pen ZGGjqL by MAW (@MAW) on CodePen

 

Hello-hello. Thanks, added!

 

Switched to TweenMax per your suggestion - still not 100% smooth, but better

[TweenLite drawSVG being slow]

I have relatively big SVG that I'm animating with TweenLite - drawSVG.

 

The problem is I can't make it going smoothly - it always being slow and intermittent first 1-2 seconds and proceeding fine on 3-4th second.

 

I've tried adding delays to make it wait until the whole page is loaded, but it doesn't give much difference. Also tried renaming 50% of .style0 classes in SVG into another class and making it non-animated and visible from the beginning - not much difference as well, first 2 second of loading are still laggy.

 

I'm looking for a way to make it smoother without editing SVG itself.

 

I'm using the following code to animate it:

jQuery(document).ready(function($){

  TweenLite.set(".style0", {visibility:"visible"});

  var tl = new TimelineLite();

  tl.fromTo(".style0", 4, {drawSVG:0}, {drawSVG:"102%"}, "-=1");

  TweenLite.render();

});

See the Pen QbbBBb by iroller (@iroller) on CodePen