Forum Discussion
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 tran...
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?
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:
- Use GSAP to animate the actual DOM element (e.g., via document.querySelector(...) targeting the data-model-id).
- 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' } );querySelector worked! Thank you for the suggestion!
Great!
