Forum Discussion

fortheentries2's avatar
fortheentries2
Community Member
2 months ago

gsap transformOrigin not working in Storyline

Hi,

I'm trying to make an interactive graph where the user hovers over the bar on the graph and the height of the bar grows upwards with animation. I've been trying to use gsap with scaleY and transformOrigin: "bottom left" so that the bottom of the shape stays in the same place and its only the rest of it that transforms. However, no matter how I phrase this, the transformOrigin property doesn't seem to work and it scales with the origin in the middle. I've tested it in a browser demo (code written outside of storyline) and it works fine.

Does storyline support gsap transformOrigin?

My code is below (tested in codepen) and screenshots of file

https://codepen.io/fortheentries/pen/LEVWLoR

Triggers

 

Before scalingAfter scaling
advice
Articulate 360
community
e-learning development
other
storyline 360

6 Replies

  • JordanBest's avatar
    JordanBest
    Community Member
    17 days ago

    Try this:

    const box = object('abc');

gsap.set(box, {
  transformOrigin: "bottom left",
  display: "inline-block",
});

gsap.to(box, {
  scaleY: 2,
});

     

    • DaveSundberg's avatar
      DaveSundberg
      Community Member
      17 days ago

      Thanks,

      That is essentially what I am doing. transformOrigin is not working. I have opened a ticket with Articulate.

  • DaveSundberg's avatar
    DaveSundberg
    Community Member
    17 days ago

    Hello,

    I am trying to accomplish the same thing as you with GSAP but I am finding the same problem as you, transformOrigin does not seem to work in SL and GSAP. I've watched other demos of it working but they were a couple of years old and probably an older version of SL. I wonder if something broke in the latest version? Anyone else having the same issue?

    • Nedim's avatar
      Nedim
      Community Member
      17 days ago

      transformOrigin won’t work with GSAP if the target element is referenced using the object() function alone. To achieve the desired effect, you have two options:

      1. Use GSAP to animate the actual DOM element (e.g., via document.querySelector(...) targeting the data-model-id).
      2. Use the Web Animations API, which can work directly with the object returned by object() if it supports animation. 


      Option 1:

      const box = document.querySelector('[data-model-id="6FmKrDaANZj"]');
gsap.to(box, { 
  transformOrigin: "bottom left",
  duration: 2,
  scaleY: 2,
});

      Option 2:

      const box = object('6FmKrDaANZj');
box.style.transformOrigin = 'bottom left';
box.animate(
  [
    { transform: 'scaleY(1)' },
    { transform: 'scaleY(2)' }
  ],
  {
    duration: 2000,
    easing: 'cubic-bezier(0.42, 0, 0.58, 1)',
    fill: 'forwards'
  }
);