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: http://codepen.io/jonathan/pen/YGQvjy 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.

Ya Craig! thats the one! the other technique was a scaling nightmare as well. with your technique it still all fits together perfectly. thanks for that.

hi, thanks for getting back to me. here is a couple of texture maps of different resolutions for the star. carl i tried to put the PNG in the SVG code like you said and all that does is block me from getting to the SVG trigger; i dont want to make the PNG be the trigger because then you have a huge invisible square trigger area. i was just looking in the codepen and i cant find a way to put the image file in there. do you know how to do that. if not i can upload the test files to my server to look at it all together. jonathan: i tried the pointer-events:none css setting and it does allow me to pass through the PNG and click the SVG trigger elements; that would be fine and it is working in chrome and firefox but in IE it is making the ThrowProps spin really hard one way and barely at all the other way. i would like for it to work in IE. can you please describe the javascript workaround. also i want to be able to fade to another texture on hover. here attached is the hover texture as well.

hi, i have made in this draggable rotating Throwprops star test file in the codepen. i wonder if it is possible to put a star shaped graphic (a PNG with transparent background) overtop of the star shape while maintaining the star as the SVG trigger element.