Can GSAP Stretch an Object

[Jade]

Hi, I'm new and trying to learn if GSAP might answer a need for a personal project.  I did not see a way to 'search' the forum posts and I'm not seeing what I need in plugins so I'm just going to ask.

 

Does GSAP have the ability (either with or without plugin additions) to allow a user to arrive at a screen and not just drag the object but resize the object? For instance, if they wanted to scale the object to make it longer? 

 

Thanks in advance for your help.

[Jonathan]

Hello Jade, and Welcome to the GreenSock Forums!

 

GSAP is very versatile. At it's core GSAP can animate any numerical javascript object or property.

• Stretching (scaling) an element would use CSS transforms like: scale, scaleX, scaleY, skewX, or skewY.
   
• Moving (translating) elements with x (translateX), y (translateY), and z (translateZ).
   
• Rotating elements with rotation (rotate), rotationZ (rotateZ), rotationX (rotationX), and rotationY (rotateY)

GSAP can animate HTML, SVG, Canvas, and WebGL elements properties and objetcs.

 

For CSS transforms you can learn about the various transforms available:

 

Using CSS Transforms: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

 

You can see here the bouncing ball stretches and squashes

 

See the Pen EVXgGV by jonathan (@jonathan) on CodePen

 

Slight stretching and motion blur on an element:

 

See the Pen QNGQaN by jonathan (@jonathan) on CodePen

 

Basically for CSS GSAP uses the CSSPlugin:

 

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

 

Check out the following links:

 

GSAP CSS3:

 

https://greensock.com/css3/

 

GreenSock Learning YouTube Channel

 

https://www.youtube.com/user/GreenSockLearning/videos

 

GSAP Jump Start:

 

https://greensock.com/jump-start-js#from-tween

 

GSAP Docs:

 

http://greensock.com/docs/#/HTML5/

 

[Carl]

I think you might be asking about Draggable? http://greensock.com/draggable

 

Draggable was designed to facilitate dragging, rotating and throwing. However, it is possible to write your own code that would facilitate scaling.

 

Here is a very long discussion on the challenges and some solutions

 

http://greensock.com/forums/topic/9288-draggable-resize/?hl=swampthang

 

See these demos

http://codepen.io/swampthang/full/akyZOr/ (SVG drag, scale, rotate) use the little grey squares to scale

 

A good rule of thumb when reading these long threads is to click on any CodePen links that Blake provides:

http://codepen.io/osublake/pen/EaXNMd

 

In short, scaling with Draggable is not supported natively but it is entirely possible.

[Jade]

Hi again, thanks for the responses here. This helps clarify things better for me.