Zoom lag SVG with expoScaleEase

[kgrondin]

Hi there,

 

I can't put any demo for example but i will try to explain as much as possible.

 

I'm working on a "map" in SVG where i will have some interactive elements. In my interface, i make a button to zoom up and another to zoom down. I have limited the maximum and minimum zoom possible. Here my function that is making the zoom :

 

TweenMax.fromTo(element, 0.3, { scale:previousScale }, { scale:currentScale, immediateRender:false, ease:ExpoScaleEase.config(previousScale, currentScale, Power0.easeNone), onUpdate:update});

 

This is in a function that determine the "previousScale" and "currentScale" to do the work. The update variable in my onUpdate paramater is :

 

var update = function () {
  elementToMove[0].update(true);
};

 

Where "elementToMove" is my draggable object that i have created.

 

My problem : I'm not sure if it's because i have a lot of layers on my SVG, but when i'm zooming, it's lagging a lot.

 

Anyway to keep my big SVG and zoom normaly, without lagging?

[OSUblake]

1 hour ago, kgrondin said:

Anyway to keep my big SVG and zoom normaly, without lagging?

 

 

¯\_(ツ)_/¯

 

It's impossible to say without a demo, but zooming in and out of an SVG is not a cheap operation. Especially if your SVG contains a lot of elements, complicated paths, or stuff like gradients, clip paths, masks, filters. The browser has to recalculate and repaint your entire map on every animation frame. You may need to use something with better performance like canvas or WebGL. That's what most online maps use.

 

Here's a pretty cool article about how to make a map with canvas... well, the theory behind it. It doesn't show a lot of code.

https://medium.com/google-design/google-maps-cb0326d165f5

 

And what is the purpose of updating your draggable element on every update? That can also hurt performance. If I need to update a draggable, I usually just add that logic in the draggable's onPress callback.

 

And here's an SVG demo with zoom/pan capabilities you might want to check out. The performance is pretty decent considering how complicated the SVG is.

 

See the Pen oGoyYb by osublake (@osublake) on CodePen

 

 

 

[kgrondin]

I'm not really familiar with Canvas. If i have my svg file, can i put it in and have all the same controls that i have outside a canvas?

 

For the Draggable element, it's my div element that contain the SVG element. I have put a onUpdate parameter because when i was zooming, the position of the Draggable object was not updating (considering its movement was limited in a container)

[OSUblake]

37 minutes ago, kgrondin said:

I'm not really familiar with Canvas. If i have my svg file, can i put it in and have all the same controls that i have outside a canvas?

 

Eh... yes and no. You can render an SVG inside a canvas element, but it will be converted to a bitmap, so your map may become pixelated if you zoom in too much. Canvas can render vector paths, which scale just fine, but that might be a lot of work if you're not familiar with canvas.

 

Why don't you try modifying the demo I posted above with your map? No guarantees, but it might perform better. The dragging and zooming is all done by changing the SVG's viewBox.

[kgrondin]

It seems to work better than mine indeed. But i hope i will continue to work just fine because i still have some layers to add! Thanks for helping.

 

I really should check Canvas and WebGL. I was hesitate to check about it because it seems not simple to add click event in a layer in canvas.

[OSUblake]

20 minutes ago, kgrondin said:

I really should check Canvas and WebGL. I was hesitate to check about it because it seems not simple to add click event in a layer in canvas.

 

Yes, doing click events from scratch isn't the easiest thing to do in canvas, but there are several libraries that can help with that, like PixiJS and EaselJS, and both play very nicely with GSAP.

 

PixiJS demo - https://pixijs.io/examples/#/demos/interactivity.js

EaselJS demo - https://www.createjs.com/demos/easeljs/draganddrop

 

[kgrondin]

Long time ago, in school, i had use PixiJS to create a mine game, but i don't remember anything about it!

 

I was wondering... If i had to use PixiJS to create my interactive map, should i separate all my layer in multiple svg file?

The problem here is in my map, i need to map layer with data in a database. When i click in a shape, it should show me informations about it but the more complexe things is that i have to had some data in the SVG itself to allow me filtering them.

[OSUblake]

Well, a smaller number of layers will render faster. With PixiJS, you can define interactive hit areas on a sprite using something like a PIXI.Polygon, and attach the data from your database to the event listener for that hit area.

 

 

[kgrondin]

It's really interresting but probably not the best for this project. I have about 350 items to be interactively show/hide with filters and that can be click to show more informations.

 

I save some perfomance because my interactive elements are on a building (at different floors) and i hide a floor when not use.

 

About PixiJS, i think i just put in my mind that it is use for games but i never think about using it for something else! When i got time to learn more about, i will try a little project with it. My main focus is a to have something easily interactive for users and easy to repeat if necessary.