[ANSWERED] smooth resizing animation?

Jan 13, 2023

Avery H
By Avery H

Is it possible to change the size of an object -- specifically, in this case, a simple square to have one side grow larger -- smoothly without using Zoom and without using Animations? I would like it to grow in size smoothly without having to layer a ton of squares on each other at increasing widths (which then would cause a non-smooth animation).

I would love for the above blue square to grow from that to this:

4 Replies
John Morgan
over 1 year ago01/13/23 at 9:53 pm (UTC)

Hi Avery,

Thanks for checking in about this! Currently, Storyline doesn't have the ability to create that type of animation. The best way to possibly see a feature added is to submit a feature request. You can submit one here. If the request makes it onto our feature roadmap, we’ll make sure to update you in this conversation!

Thanks for reaching out!

Math Notermans
over 1 year ago01/15/23 at 4:24 pm (UTC)

As John states it isnot possibly default in Storyline, however under the hood Storyline360 uses the GSAP engine, and using that it is quite easy.

Here you see a sample:
https://360.articulate.com/review/content/9da1fdbf-e90e-4af7-b15e-eec61a135a64/review

And these 2 lines of Javascript code do the trick.

First you have to select your element by script. I often use the 'accessibility names'. So i changed that one to 'blueShape'. Then with this querySelector you can select your blue shape.

var obj2Animate = document.querySelector("[data-acc-text='blueShape']");

After that you can animate your shape. The line below is the gsap code for that.

gsap.to(obj2Animate, { duration:4, scaleX:2.5, transformOrigin:"top left",ease: "power4.out"});

Syntax is like this..
gsap.to( targetElement, { parameters for the animation } );
GSAP has quite some more options and is really powerfull.

Here is my sample.

Avery H
over 1 year ago01/17/23 at 11:00 pm (UTC)

I was wondering if JavaScript could do it!! Thank you! This just motivates me more to learn JavaScript... Thank you so much!!

Is GSAP what you'd recommend to learn to have functionality within Articulate? I know VERY little about different coding languages but tend to pick up the nuances around it all pretty quickly. :) 

Sign In to Reply