Virtual camera navigating a "canvas"

[jyamad]

Hi all,

 

I am new to GSAP, but I am looking for a way to build a presentation/animation that mimics navigating a static layout with a camera with pans, zoom, etc. Conceptually it is similar to what is achieved by impress.js (https://github.com/bartaz/impress.js) but I want more fine-grained control over the transitions. I also need to be able to make complex embedded animations within each "view" anyway, so I think GSAP fits that bill.

 

I'm looking for some advice for how to set things up for success here. I need to both switch to new logical scenes, and also to navigate and animate within each view/scene. My initial thought was to layout all the elements with HTML/CSS, and then use GSAP to tween between different parts of the page. One major hiccup with this method seems to be setting the initial scaling so things look good (e.g. SVGs don't pixelate) when zooming in on a particular area.

 

I saw some reference to this sort of thing on the GSAP(Flash) forum, but nothing yet for HTML5 stuff. Sorry if I missed something obvious.

 

Thanks!

[GreenSock]

Sure, GSAP is great for that type of thing. I know of several other products that use it for almost exactly what you're talking about (if I understood you correctly). I'm a little unclear about the "major hiccup" you described - are you saying that you're unable to set the initial state with various things zoomed without pixelation? For the record, GSAP doesn't control the rendering at all - it merely sets property values. But browsers do optimize performance by rasterizing/layerizing elements that have 3D transforms applied - perhaps that's what you're talking about? I guess it'd help if you provided some sort of reduced test case in codepen that clearly demonstrates the issue so that we can investigate a bit. 

[jyamad]

Thanks,

 

I've been playing with GSAP a little more and can focus my questions a bit better now. My goal is to have a set of functions that will automatically calculate the transformation needed to pan and scale the document to center a given DOM element (or SVG element). Below is a CodePen that shows the basic approach I've been trying. Note that I am translating the entire document body to give the pan effect.

 

I am having trouble figuring out how to include the zooming effect, though. I'm not sure where to set the transformOrigin on the body (or, generally, a parent element) so that the focus element ends up centered in the viewport. The obvious (to me) solutions have not worked, and I can't tell whether I'm missing something about how CSS transforms work or I'm just screwing up the math---probably both. Any help here is appreciated!

 

See the Pen LVWYgM by yamad (@yamad) on CodePen

 

As for SVGs going to rasters, I definitely understand that GSAP doesn't do the rendering. But I thought others might have tips for how to get browsers (WebKit/Chrome, for the most part) to look as good as possible during zoom/pan animations. For instance, I saw a tip somewhere that you can often inhibit the rasterization by normalizing to the largest scale you want to show.

[GreenSock]

Unfortunately, I just don't have time to look through all the math and help you craft a solution for your particular project (I really wish I had more time...I love figuring this stuff out), but I did notice that you used "translateOrigin" instead of "transformOrigin" which may be the root of some of the problems you're encountering

[jyamad]

While trying to create a more reduced version, I found my own mistake. The translate parameters do not need to be adjusted to account for scaling if you use the center of the target element as the transformOrigin. I've updated the original CodePen for reference: 

See the Pen LVWYgM by yamad (@yamad) on CodePen

,

 

and created a slightly simplified version

See the Pen MwmwgZ by yamad (@yamad) on CodePen

 

Still have to find a browser and/or browser settings that don't rasterize during these transformations though.

[OSUblake]

Check this thread out.

 

See the Pen KpzeBy by GreenSock (@GreenSock) on CodePen