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

Hi Daniel

There are animations in Storyline that move an object or shrink an object - but applying them to operate simultaneously and smoothly is virtually impossible.

I would suggest animating the object using JavasCript and the GreenSock (GSAP) JavaScript animation library. GSAP is used by Storyline so you don't have to do anything to include the GSAP library in your published Storyline code - it's already there. And actually the JavaScript code is not too scary...

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

// Use GSAP to animate the rectangle
TweenMax.to(myRectangle, 1, {
  left: "70%",  // Move horizontally
  top: "45%",   // Move vertically
  scale: 0.25,  // Shrink by 75%
  transformOrigin: "center center", // Set transform origin to the center
  ease: Power2.easeOut, // Easing function
});

When you publish your Storyline you are effectively creating a website and the screen is a 'document' within that website. To be able to find the 'name' of the rectangle you need to animate you have to find it in the document and that's what the "document.querySelectorAll" is doing. By giving the Rectangle an alternative name for screen readers via the 'accessibility' property (right click on the object and select "Accessibility" and type in the name - in our case Rectangle1) you create a class id for that object and the querySelectorAll will find it using this id.

The rest of it is just GSAP functions and parameters 

I've attached an example Story file so you can see how this works...

Hope this helps.

Feel free to ask for a better explanaton - there are some heroes here who can tell you a lot more about GSAP than I can.