[Can you pan over an image?]

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

[Can you pan over an image?]

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

[svg text in Google Chrome]

Here's an example:

 

See the Pen xbBbQM?editors=101 by anon (@anon) on CodePen

 

The placeholder is in the JS code for what I'm trying to do.

 

Thank you again, very much.

[svg text in Google Chrome]

This is great - thanks.

 

Another SVG shape quirk - what is the best way to get say 5 SVG boxes to tween to the same X value?  I don't think I can use "left" because the SVG boxes are not accepting position:absolute, unless I'm doing it wrong.

 

Is there Jquery/JS I should be using?  There's probably something really simple...

[svg text in Google Chrome]

Very grateful, thank you!  I'll test and report back.  For now, need some sleep

[svg text in Google Chrome]

Here is a simple example:

 

See the Pen xbMord by anon (@anon) on CodePen

 

Many thanks for your help!

[svg text in Google Chrome]

What could be done to animate SVG <text> in Chrome if it is defined by matrix?  Is there a way to set the X or Y value if the original code is just matrix?  Thanks again

[svg text in Google Chrome]

Thank you - was pulling hair out re the Chrome bug.  Wrapping in a <g> isn't practical for me b/c there are too many elements, but using the AttrPlugin worked.

[tween x as %, then x as number...]

Terrific, thank you

[tween x as %, then x as number...]

Thank you very much -

 

Can you explain the difference between y:-25 and y:"-=25"?  I noticed different behavior especially when moving multiple objects.  In the former, multiple objects moved different amounts.

 

Should I be reading the CSS spec to find out out how to use these things or is there a place in your API that explains each?  

[tween x as %, then x as number...]

Ah... is its xPercent of itself? 

 

Many thanks for a great tool!

[tween x as %, then x as number...]

GSAP/Jack - Could you please define what xPercent and yPercent is a percent of?  I have seen the codepens and explanations of how it works, but I'm having trouble applying it because I haven't seen a definition anywhere.  

 

For example, I see you have to set top and left first, then xPercent and yPercent work, otherwise it moves things outside the div.  Why?  Just need to know the actual definition.  Could definitely be my lack of overall CSS knowledge.  Thanks!

 

Have already looked here:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

http://greensock.com/gsap-1-13-1