Forum Discussion

AveryH's avatar
AveryH
Community Member
3 years ago

[ANSWERED] smooth resizing animation?

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 i...
storyline 360
MathNotermans-9's avatar
MathNotermans-9
Community Member
3 years ago

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.

  • AveryH's avatar
    AveryH
    Community Member
    3 years ago

    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. :) 

    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member
      3 years ago

      AS GSAP is default in Storyline.360...Yes, use GSAP for animation. It has great possibilities.
      And when you want to use Javascript in Storyline...learn it in Storyline too...