Abarth

I wrote in this forum thinking I could easily animate this using some attr animation obviously, but thanks to Carl, I got a nice reminder of snap.svg which solved the problem for me with 9 lines of code, thanks Carl. And thanks for this awesome forum, the good atmosphere and kind members. Codepen

I've recently got lucky with an answer from PointC in another thread, and now having spent a few hours researching without luck on another matter, I guess I'll try my luck again. The problem: I have 30 points, each with a X and Y value (DIV's with a Top and Left setting), placed around a map of 1536x1080px. A user can select any of these points, and when that happens, a line should be drawn (animated in) from one point, to the selected one. This seems really straight forward, and to some extend I have managed to do that, with canvas drawing (p5.js), but it turns out extremely unsharp, and seems to be way to complicated, for what it should do, I've even tried just creating a DIV, and animating on it's width, thereby faking a line. I'm assuming maybe the GSAP SVG animation tools can solve this, but had no luck finding it, it's all about pre made SVG files from illustrator, which then are masked in animations, I can't do that, seeing as I have too many points, and never know how many new ones will be created. Any good solutions to this? It seems to simple, to be this complicated :S / Chris

Based on PointC's reply, this is now solved, what a feeling See below! Now I strongly believe this should work, however it doesen't, but the console.log shows I'm right?! :S The predefined value from PointC works to some extend, but the problem is I need this to be dynamic, I don't know ahead of time the 4 values of x, y, width, height, but the end result is the same, TweenMax just doesen't seem to agree with me Predefined console.log: "20 100 50 50" <- Works Dynamic console.log: "20 100 50 50" <- Doesen't work ?!?!?!?!! //// SOLVED ///// The above problem was caused by the " signs, now the console log shows the content of the attr as a string, but really they aren't, so when I instead of focusing on placing real numbers within a string, did this: var passerString = l + " " + t + " " + w + " " + h; and NOT like this var passerString = '"' + l + ' ' + t + ' ' + w + ' ' + h + '"'; It worked. (Dynamicly) ////////////////////// $(document).ready(function() { // TweenMax.js, jQUery.js, Skinny.js -> clientRect() TweenMax.set("#theSVG", {xPercent:-50, left:"50%"}); var hasBeenClicked = false; $('.tileBox').click(function(e) { var element = $(this).clientRect(); var tween = TweenMax.to("#theSVG", 1, { attr:{ viewBox:getValues(element) }, paused:true, ease:Sine.easeInOut }).reverse(); tween.reversed() ? tween.play() : tween.reverse(); hasBeenClicked = true; }); function getValues(element) { var l = element.left; var t = element.top; var w = element.width; var h = element.height; //var passerString = '"' + l + ' ' + t + ' ' + w + ' ' + h + '"'; var passerString = l + " " + t + " " + w + " " + h; console.log(passerString); return passerString; } });

This is pretty cool, even if not quite spot on, I have a link for the project on a test server, which right now "works" but by using Zoomooz.js (which doesen't work properly). It's one single image, and the client creates DIVs in the front-end by using a mixture of Wordpress and ACF, these divs are then placed on a specific photo on the page, and has to scale the entire image up, with focus on the photo some random place in the image, AND worst part, there could be 8 places to zoom to. It's 1080x1920 px here, note Portrait mode for a touchscreen. http://djm-infotouch.dk/ (Click the only image, and go right once, then you see the red squares (which normally are opacity: 0) This effect, for this project, only without Zoomooz.js (which seems to be outdated)

Yes exactly! I can certainly make this work, just slightly worried that a 287kb image is causing a small lag?

Hey I'm currently working on a touchscreen which let's say for simplicity sake, just has a fullscreen bitmap image, the image is of a book and I wan't to be able to zoom into certain parts of this old book. Around this bitmap of the book, I've placed invisible DIV's to click on, when clicked, I would like the entire bitmap, to center the invisible box, by scaling up the entire bitmap. Basicly like the Zoomooz.js library, but I just know there must be a way to do it with GSAP ................. ................. . . . . . . Result should be: . X . With the "invisible" dom element zoomed in, but by using the viewBox. . X . . . ................. ................. When reading around the forums, I came across this post, which exactly does what I want, but this whole viewBox thing, seem to be a SVG thing, and therefor no help. This post Any ideas? Codepen: http://codepen.io/Abarth77/pen/MpJagb?editors=1111 The File: Zoom.zip