Jump to content


Infinite SVG-Like Zoom Animation with PIXI

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



I'm curious about whether something I'm doing in svg will be possible in PIXI. I'm building complex svg diagrams that animate, but also with aspects of them that I want to be able to animate zoom on, (almost) infinitely (think Mandelbrot set like zoom but data-visualization related). Currently I'm using svg for that infinite scaling capability, but I know that for some of my data sets, svg isn't going to cut it eventually. It'll just become too much weight on the DOM / CPU at some point as there will simply be too many things on the screen to render, forget animate.


I could look into things like tiling, but that has a pretty huge performance / usability penalty for my use-case. Also, the complexity and detail of what I need to visualize isn't so great as that of a map either. Also, I'd still need to animate aspects of the visualization, which isn't usually necessary with tiled maps.


I'd like to switch to leverage a gpu based solution like PIXI down the line. The only problem is that PIXI doesn't really preserve the scalability aspect of svgs (not at all a PIXI expert, have only built some simple circle animations to test with). I'm pretty confident that minus the zoom functionality, PIXI+GSAP will be a good solution for every other aspect of the rendering / animation, but do you know if there is a way to leverage all the GPU powered goodness of PIXI but still preserve the sharpness of images and text as a user "infinitely" zooms in? (10x, 100x, 1000x scale of original)?

Link to comment
Share on other sites

Definitely nifty, but doesn't really address my fundamental question. Will keep be keeping in my back pocket though :)

Link to comment
Share on other sites

Doing a mandlebrot is completely different than zooming in on some graphics. Mandlebrots are pretty easy to do with a shader. In PixiJS, SVGs are converted to images, so you really can't zoom in on them too much without pixelation. And PIXI.Graphics are converted into triangles, so if you zoom in really close to a circle, you'll start to see the edges of the triangles that make up the circle.


So the answer to your question, is that there is no good solution. You're going to have to make a tradeoff somewhere. SVG is slow, and Pixi can't do true vector graphics. One of the main devs of Pixi has been working on a vector solution for over 2 years. I think using a maps-like solution might be your best option.



There is one exception to zooming with WebGL using signed distance fields, but those are usually used for text and stickers. Here's an example of signed distance field text.



And another...



...from this article.


  • Like 4
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.