Jump to content
GreenSock

Abarth

Zooming into a bitmap

Go to solution Solved by Abarth,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:

 

The File:

Zoom.zip

See the Pen MpJagb?editors=1111 by Abarth77 (@Abarth77) on CodePen

Link to comment
Share on other sites

Hi Abarth :)

 

Welcome to the GreenSock forum.

 

I think Jonathan is about to post something which will certainly be helpful, but I'll sneak in quick with my two cents worth.

 

You can use the viewBox animation technique with an image. All you have to do is add your image into the SVG and you can zoom in/out all you want and hit the target every time. Here's a quick example.

 

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

 

Happy tweening.

:) 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

If you need all sections of a book page to be zoomable based on a defined grid, I whipped up a quick pen that does this using a single image tag in the markup.

 

- JS builds a grid of <div>s

- Takes the single image and applies it as a background on a defined number of tiles

- It then positions that image background on each tile to create a mosaic representing the single full screen image

- Clicking any of the tiles simply scales that tile

 

One thing I didn't do was the logic to center the scaled tile ... just to get the above idea across quickly.

 

See the Pen wJgKyG?editors=0010 by sgorneau (@sgorneau) on CodePen

  • Like 3
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

  • Solution

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;

}

});
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×