Jump to content
Search Community

Zoom lag SVG with expoScaleEase

kgrondin test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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

 

 

 

  • Like 1
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
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.
×
×
  • Create New...