Gsap animations relatives to the main container scale value (Storyline)

[Grégory F.]

Hi, I'm trying to use Gsap to make some advanced animation in Storyline, but I have a serious issue, because the course is resized depending the window size with css transformation : scale(). GSAP seams to ignore this rule because for example 200px is always 200px no matter the scale ratio.

For now, I calculate the ratio and create the tweens depending of it (and recreate them on window.onresize), but there is an issue if you change the window size during the animation.

Is there any possibilities to get the animation to be relatives to this scale ?

https://360.articulate.com/review/content/9a23964a-1d79-4c1c-8e47-e8f036269c18/review

Here an example of a tween:

window["tween"+i] = gsap.fromTo(labels[i],{y:574*scale},{y:334*scale,ease:"power1.out", duration:0.25, paused: true,immediateRender:false, onComplete:twComplete,onCompleteParams:[i]});

Thanks a lot.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import GSAP as shown in the Install Helper in our Learning Center : 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Grégory F.]

Hi, I posted the demo link, the course is on Review from Articulate, as it is intergrated to Storyline, I can't post a codepen.

[mvaneijgen]

Hi @Grégory F. welcome to the forum!

 

 

We ask for a minimal demo to have something where we can edit the code so that we can help you debug. I have no idea what the site is that you're sharing, but we can't edit the code there or, for that matter, even see the underlying code. 

 

The platforms linked above are our preferred demo platforms, which work the easiest. CodePen is great because it is the simplest. Keep in mind that it is a minimal demo with an emphasis on minimal; all we need is a few colored divs demonstrating the issue at hand so that we can help you debug. What you're sharing seems like the production ready elements, which is also fine if you can share these on Codepen, but be prefer the least amount of code, so that we can focus on helping you solve your issue. 

 

Hope it helps and happy tweening! 

 

[Grégory F.]

Hi, I can send the Storyline file, but if you don't know Storyline, it will not help you. I have no code to share in code pen, because the code is strongly linked with Storyline, so my code alone will not be relevant (only JS).

Basically, my question is : should GSAP animation be affected by the css transform scale() rule of the parent container? Because, in my example, he is not.

In my example, "labels[i]" is a div and "scale" is the ratio.

Thanks.

[Grégory F.]

It's seams to be a "normal" issue, many other users seams to have similar concerns: https://community.articulate.com/discussions/discuss/gsap-and-changing-the-window-size/766752

Not sur if there is a way to get over it.

[mvaneijgen]

1 hour ago, Grégory F. said:

u. I have no code to share in code pen, because the code is strongly linked with Storyline, so my code alone will not be relevant (only JS).

 

That is why we ask for a minimal demo. A minimal demo is just a few colored divs focusing on the issue that you're having.

 

Personally I always start with all my animations on a place like Codepen, just to test my animation in its basic form with pure HTML, CSS and JS to make sure my animation is working as expected and not my framework or in this case platform is trowing errors. This also makes it really easy to debug, because you have a known working version and next to that you can easily share a version on places like this to ask for feedback when you get stuck.

 

I've read your question and also the question you've linked. But I really have no idea what is wrong . We have to see the underlaying code (HTML, CSS and JS) with a live demo, to help you debug. So sending just the JS will tell just 1/3 of the story. I know making a minimal demo will be some work, but in the process you'll probably solve your own issue. And if not you can ask for feedback here. So if you need help please provide a minimal demo with emphasis on minimal, help us, help you!

[Grégory F.]

I understand your point of view, for sure, but I have no access to the html/css because it is generated by Storyline, and the issue is not really with the animation by itself (it does what I expect), but about the calculation of the coords by GSAP that seams use absolute dimensions (the real amount of pixel on the screen) and not the relatives ones (depending of the scale of the containter).

I will try to do a small demo if it's possible because, there is so much parameters I'm not controlling, I don't know if it will be relevant.

[GreenSock]

Yeah, it's very difficult to understand exactly what you're asking which is why a very minimal demo is so essential and it's best if that demo isn't related to Storyline at all - just some basic colored <div> elements that illustrate the issue.

 

I'm pretty sure that once we see a demo, we'll quickly be able to offer suggestions. For example, maybe use a CSS variable that you animate with GSAP and it's plugged into the CSS transform translation and/or scale. Or maybe use a gsap.matchMedia() to update animations on resize according to whatever logic you want. Pretty much anything is doable with GSAP. 

[Rodrigo]

Hi,

 

We understand the difficulties of providing a demo that illustrates the issue when working with Articulate Storyline.

 

Perhaps the comments by @Math in these threads could provide some help:

 

Hopefully this helps somehow

Happy Tweening!

[Grégory F.]

Thank you for the advices, I will look into it!

[Grégory F.]

Ok, in fact, Storyline change the size and positions of all elements when the window is resized, it doesn't use scale property… So maybe GSAP is not the right tool (if I want perfect animation when window resizes) because you can't ajust the values during the animation. At best, the element can be moved at the right spot at the end of the animation.

I guess animation() will have the same issue?

[GreenSock]

On 7/28/2025 at 4:38 PM, Grégory F. said:

maybe GSAP is not the right tool (if I want perfect animation when window resizes) because you can't ajust the values during the animation. At best, the element can be moved at the right spot at the end of the animation.

I can't imagine that'd be the case. You can do almost anything with GSAP. Once you provide a minimal demo that clearly shows the problem in an isolated way, I bet we'd be able to provide some solutions for you. 

[Grégory F.]

Ok, I tried to make a very simple demo how SL works :

See the Pen empdqGb by Gr-gory-Fauchille-HDready-Graphic (@Gr-gory-Fauchille-HDready-Graphic) on CodePen.

 

The issue is to be able to have continuous  animation when you switch from a size to another. So the label div, should be placed at the interpolated X and finish the animation as it would if the container where resized with the scale property (except that SL don't use it, it resize everything and I don't know how they manage their animations).

 

Thanks.

[mvaneijgen]

This changes the container size and then creates a new animation that then takes effect.

 

To me it looks like you just need gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ to have your tween behave different on different screen sizes. You can just define different values per screen size or you get something dynamic that is different on you different screen sizes and use that in a function based values https://gsap.com/docs/v3/GSAP/Tween/#function-based-values

 

 

See the Pen gbagOjN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

 

Also your initial question talks about scale, but in your demo this has nothing to do with scale, so that is a bit confusing at the moment.

 

Hope it helps and happy tweening! 

[Grégory F.]

Hi, yes, in first hand, I thought SL used scale property, but I figured out that it resizes everything in the slide, that's why the gsap animation doesn't follow the rescale.

My issue is to have a consistent animation when the user resize his window browser. In your example, the animation is restarted, it doesn't continue at the point it was when the window has been resized.

Here is an example of what i'm trying to achieve (the animation doesn't break, it continue flawlessly and smoothly), but Stroyline doesn't use scale, that's the trick.

See the Pen vENgOEy by Gr-gory-Fauchille-HDready-Graphic (@Gr-gory-Fauchille-HDready-Graphic) on CodePen.

 

[mvaneijgen]

You will probably be able to fix this with a lot of custom code, but my question would be why do you even want to fix this issue that no one is having? No normal visitor is going to resize their browser half way through reading a webpage, that is only something we as developers do while testing a website. 

 

If this was a concern I would have I would just have the animation restart, as per my suggestion above, but anything is possible with GSAP, just depends how much time you want to spend on it. 

 

But I can not think of any quick fix for this 🤷 

 

Hope it helps and happy tweening! 

[Grégory F.]

For me, it not a real problem, for now, I just set  it at the right place at the end, but I try to anticipate any client requests (not users, but the client who pays and who is trying everything even almost impossible situations). 

So to avoid such feedbacks, I'm trying to test the boundaries to know what I can do or not. So, for a small and quick animation, that would do the trick (but I have to calculate the ratio first, not a problem), but for a long or slow animation, it could be an issue.

[GreenSock]

Hi @Grégory F..  There are many, many ways to approach this. Here's one: just set up your CSS with variables that you can set/animate and all the sizing/distances are relative to that: 

 

See the Pen LEpxROK?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

If you still need help, once you show us a simple CodePen that illustrates the actual problem I bet we can offer some suggestions. 

[Grégory F.]

Nice trick, I will try to see if it's possible to adapt.

[Grégory F.]

Ok, thanks to your idea, it works pretty well with a simple exemple, here is the code (I don't create a codepen because it's relative to Storyline, so it wouldn't work)

const rectObject = object('5oE7Z4mQu9y');
const r = document.querySelector(':root');
const rectangle1 = document.querySelector('[data-model-id = "'+rectObject.name+'"');

var scale = 1;
getScale();

gsap.set(rectangle1,{"--xPosition":rectObject.x+"px"});
gsap.set(rectangle1,{"--xPositionGSAP":'calc(var(--xPosition)*var(--scale))'});

rectangle1.style.translate = "var(--xPositionGSAP)";

window["tweenTest"] = gsap.to(rectangle1,{"--xPosition":600,ease:"power1.out", duration:20});

function getScale(){
	scale = parseInt(document.getElementById("slide").style.width)/slideWidth();
	r.style.setProperty('--scale', scale);
}

window.onresize = getScale;

With a live example : 

https://360.articulate.com/review/content/9a23964a-1d79-4c1c-8e47-e8f036269c18/review