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.

Thank you, John. Java Script is a bit intimidating, but It´s a good pretext to use code and I´ll explore it. Your example runs nicely, it´s exactly what I want.

Let me tell you that after forgetting the issue for a while, and just before sleeping, it came to me this idea: a very brief layer with several copies of the object, each one with a very brief duration.

The result looks fine and it´s another good option to explore and refine. 

Thank you!

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.

Thanks Math - As I said in my post "there are some heroes here who can tell you a lot more about GSAP than I can" - and you are certainly one of them!

I use GSAP infrequently - but this will motivate me to brush up on it :)

GSAP and Rive are 2 major helpfull tools when developing animation for elearning projects.

I rarely aspire for this because I think it needs javascript to perform well and I find Javascript intimidating; but if I need it, I will-

• Put the item I'm shrinking on a rectangle that is twice as wide and twice as tall as my shrinking graphic.
• Put the shrinking graphic in the corner of the rectangle opposite the direction you want it to shrink.
• Group the graphic and rectangle.
• Apply the shrink animation to the group.

I rigged this example a while ago, but maybe it can provide some insight.

Grow From

Thanks, it looks a good alternative,too! I´ll try it.