fractal zoom

[jedi]

i would like to be alble to zoom into a element that is on the page and have the users perspective fly/dive into the selection.

 

not the element coming out of the page at you; .. not like this example:

See the Pen YGQvjy%C2%A0 by jonathan (@jonathan) on CodePen

 

in this the element is coming out at you. i want to be able to have the whole page stay with the same aspect ratio relevant to each other and just fly into one of the elements.  once there i want to be able to load a new page or scene; or load the inset fractal information that is inside of the selection. let me know if anyone has any ideas about that.. if this was flash actionscript i would make a new scene when the zoom animation is complete to load the fractal or inset page that you zoomed into.  a technique for fast loading time: the new page can first appear in black and white; then the color information loads when it is ready; then animations if the users system can handle them. is there something in GSAP that lets me do that.

 

or do you have any other recommendations for how to load a new page after the zoom in a seamless way.  do you think it is possible to make a fractal zooming navigation mechanism with GSAP? or should i look at other plugins for this purpose.

 

 

if this was 3d animation i would make the camera fly into the element. i think making every element zoom forward like is happening in the map zoom would be too much code and too cluttered and im not sure if that is a good solution or if it would be possible to summarize the code for that somehow. 

See the Pen YGQvjy  by jonathan (@jonathan) on CodePen

[Jonathan]

Hello jedi, and Welcome to the GreenSock Forum!

 

That type of effect is possible with GSAP. At its core GSAP can animate any numerical javascript object or property, whether it is CSS, SVG, Canvas or WebGL. 

 

If you are using SVG than you can animate the viewbox attribute.

 

SVG viewbox attribute:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

 

Examples of that in use:

 

See the Pen XbqBmM by PointC (@PointC) on CodePen