A shrink-to-the-corner effect. Is it possible?

Small correction(s) on John's code.

querySelectorAll selects all elements with a given name. And thus when using acc-names that are not specific enough you can run into trouble. Do use querySelector when selecting a single element. Not perse necessary in this case, but good to know.

Further in Storyline360 now GSAP 3 is included. TweenMax refers to the 2 version. So you better use gsap.to instead of TweenMax.to

Another thing is the transformOrigin parameter. It is fine to set it to the center as John does, but in some cases it can be usefull to set it to another spot of your element. Then you could use  transformOrigin: "bottom right" to ensure the origin point it transforms from is on the bottom right. You can use a pixel value too.

Its also good to be aware of the fact that a change of transformOrigin wont animate. It sets directly. So its a good practice to use it like that in gsap.

In the end that changes the complete code to this.

// Get a reference to the rectangle object
var myRectangle = document.querySelector("[data-acc-text='myRect1']");

// Use GSAP to set the origin directly
gsap.set(myRectangle, { transformOrigin: "center center" });

// Use GSAP to animate the rectangle
gsap.to(myRectangle, {
  duration:1, // duration of the tween
  left: "70%",  // Move horizontally
  top: "45%",   // Move vertically
  scale: 0.25,  // Shrink by 75%
  ease: Power2.easeOut, // Easing function
});

Do notice the 1 second duration is now between the brackets.