Can you pan over an image?

[cbslt]

Hi - Can you use GSAP to pan over an image?

 

Here is an example - see "Panning" 

http://darsa.in/motio/#!examples

 

The use case is: I'd like to create a storyboard (like a comic strip) and pan through it to tell the story.  In other words, instead of moving an object, it's like I want to move the viewport from one part of an object to another.

 

Ideally the user could move their mouse in different directions to control the pan, as in the motio example above.

 

Thanks

[Diaco]

Hi cbslt 

 

Of course we can ! . but i think doing this type of projects is a bit beyond what we normally handle for supporting GSAP API . Pls start Coding , Certainly we will help you if you have any problem with GSAP

[Carl]

Yup, Diaco, is right (again).

 

GSAP can animate any property of any JavaScript object and most numeric CSS values too, so it would certainly be up to the task.

However, keep in mind that GSAP animations have pre-defined start and end values, but what you are describing requires constant updates based on mouse position, so tweens aren't really necessary here.

 

The first step in understanding this type of effect is to study the underlying mechanics of responding to the mouse motion and converting the mouse coordinates to positional values of various elements.

It looks like this page has a very nice example to study: http://www.rleonardi.com/tutorial-animation/

[Shaun Gorneau]

Absolutely! It would be pretty much the same technique used for parallax: put an <img> in a <div> ... set the <div>'s overflow property to hidden and Tween the <img> top property from one value to another. In this case, however you would want to tween the top and left properties together to move around the image. Like this,

 

See the Pen jERzgN by sgorneau (@sgorneau) on CodePen

 

I would go a step further and change the animated properties (top and left) to "transform: translate3d()" for smooth, hardware accelerated movement. 

 

See the Pen NPmMPZ by sgorneau (@sgorneau) on CodePen

 

Lastly, I would probably tie the animation to the scroll position.

[Carl]

Shaun,

 

Thanks for the contribution. Neat demo.

 

Just want to save you some time and share some tips.

 

set defaultEase

If you are going to use the same ease many time, it can help to use TweenLite.defaultEase = Sine.easeInOut;

 

do not pass in complex transform strings

transform:translateX(value) can simply be x:someValue

 

The transform strings require an extra layer of parsing and are not as efficient as GSAP's transform properties

 

 

I understand that you were using translate3d for extra GPU juice, but don't worry. I have good news! GSAP automatically will use translate3d or matrix3d during the tween even for 2D transforms like x and y. 

 

Your code can be reduced to

 

var tl = new TimelineLite();
TweenLite.defaultEase = Sine.easeInOut
tl.to( 'img' , 1 , {x:-10, y:-20} )
.to( '.comic', .25, {x:-390, y:0} )
.to( '.comic', 1, {x:-395, y:-5} )
.to( '.comic', .25, {x:0, y:-300} )
.to( '.comic', 1, {x:-10, y:-303} )
.to( '.comic', .25, {x:-390, y:-300} )
.to( '.comic', 1, {x:-394, y:-304} )

http://codepen.io/GreenSock/pen/wBZjoV?editors=001

 

see the note in the source about inspecting the comic during the animation and you will see it uses translate3d

 

Check out our new(ish) Getting Started video that illustrates how x and y work: http://greensock.com/get-started-js

and check out the force3D section in the CSSPlugin docs.

 

Hope this helps, and again thanks for the demo.

[Shaun Gorneau]

Carl, those are great tips! Thanks! That will definitely help with some other projects I am working on

[cbslt]

Thank you all!  That's a great start for me.  Much appreciated.