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: http://codepen.io/yamad/pen/LVWYgM, and created a slightly simplified version http://codepen.io/yamad/pen/MwmwgZ Still have to find a browser and/or browser settings that don't rasterize during these transformations though.

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! http://codepen.io/yamad/pen/LVWYgM 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.

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!