Unable to animate transformOrigin (in this case on a simple html element not SVG))

[romain.gr]

Hi,

 

Not sure what I'm missing here but the transformOrigin is not animating, it just goes from '100% 0' to '0 100%' without transition :

 

    var showVideo = gsap.timeline();
    var $video = $('.rectangle');
    showVideo   .set($video, {transformOrigin: '100% 0', scale: .8})
                .fromTo($video, 2, {rotationX: 0, rotationY: 0}, {rotationX: '5deg', rotationY: '5deg'})
                .to($video, 2, {transformOrigin: '0 100%'})
				//.fromTo($video, 2, {transformOrigin: '100% 0'}, {transformOrigin: '0 100%'})
				//NOT WORKING either
				//.fromTo($video, 2, {transformOrigin: 'right top'}, {transformOrigin: 'left bottom'})
				//NOT WORKING either
                .fromTo($video, 2, {scale: .8}, {scale: 1})
                .fromTo($video, 2, {rotationX: '5deg', rotationY: '5deg'}, {rotationX: 0, rotationY: 0}, '-=2')

Any idea?

 

Thank you

See the Pen vWARwRxavLyk by romaingranai (@romaingranai) on CodePen

[ZachSaucier]

Hey romain. By default, GSAP sets new transformOrigins, not animates them, because that's what most people expect. To animate the transform origin, you can use a proxy object and update the values in an onComplete. Here's how I'd set it up:

See the Pen MWwRVqX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Some other improvements you could make:

• Put the duration inside of the vars parameter so that you can use GSAP's defaults.
• Use GSAP's defaults to save you some typing.
• Use GSAP's keyframes to save you some more typing. 
• Don't put units on your rotations to save you even more typing.
• Drop jQuery because why not?  

[romain.gr]

Hi Zach,

 

Thank you for your answer, I'm just wondering if it wouldn't be more simple to use .set() if you want to set the transform-origin (like on the first tween) and use .to() if you want to animate it? I know the answer is no, but it looks like you are adding an extra step to achieve that, if .set() is made to set and .to(), fromTo(), from() is made to animate.

 

Cool little extra advices, about the duration, what if the whole animation is longer than 2 sec, in this case it works but in case of longer animation what's going to happen? or the duration (2) is set for each tween or for the whole timeline?

 

Thank you

[ZachSaucier]

1 hour ago, romain.gr said:

I'm just wondering if it wouldn't be more simple to use .set() if you want to set the transform-origin (like on the first tween) and use .to() if you want to animate it? I know the answer is no, but it looks like you are adding an extra step to achieve that, if .set() is made to set and .to(), fromTo(), from() is made to animate.

While I agree that using only .set() to set the transformOrigin is more simple, the current behavior is a convenience for developers since it's generally what people want. It'd make it less convenient for force people to write .set(elem, {transformOrigin: myOrigin}) every time instead of just including it in the tween.  In other words, GSAP does it the way that it does to serve the 99% use case, not the 1%, even if the 1% way, strictly speaking, makes more sense  

 

1 hour ago, romain.gr said:

Cool little extra advices, about the duration, what if the whole animation is longer than 2 sec, in this case it works but in case of longer animation what's going to happen? or the duration (2) is set for each tween or for the whole timeline?

Defaults are inherited by each tween, not set on the timeline itself. GSAP's default duration is actually 0.5s, so the following is a valid tween:

tl.to(foo, {x: 100})

Changing the default duration for tl to 2 would just make that tween run 2 seconds instead of 0.5. However, defaults are easily overwritten by declaring the property:

tl.to(foo, {duration: 1, x: 100}) // duration is 1, not 2

 

[romain.gr]

Hi Zack,

 

sounds logic

 

Got the point for the duration, thank you again.