Unable to animate transformOrigin (in this case on a simple html element not SVG))
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, {transform
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
