Forum Discussion
GSAP - Object jumps to top-left
Hi everyone,
I hope you can help me. Been working on this issue for 5 hours and i cannot get it to work.
Here's the thing:
- I am working on a project where a timer is needed.
- For this timer, i have a green bar that scales down to 0.001
- I have a variable starting time and a variable speed.
- Therefore i think i need javascript to achieve this. (i cannot use the animations, since the duration and starting position cannot be variable)
- I have given the timerbar an alt text called timerbar
Currently, i have this code:
let player = GetPlayer();
let timerbar = document.querySelector("[data-acc-text='timerbar']");
gsap.fromTo(timerbar,{},{scaleX:0.001,transformOrigin: "left",ease:"none",duration:10})
This works fine. The bar is scaling down to 0.001 in a duration of 10 seconds.
I can even replace the 10 with a variable to make the time variable.
But:
I would like to start at a variable scale (hence the fromTo).
If i want to start at a scale of 0.5, i could use this code.
let player = GetPlayer();
let timerbar = document.querySelector("[data-acc-text='timerbar']");
gsap.fromTo(timerbar,{scaleX:0.5},{scaleX:0.001,transformOrigin: "left",ease:"none",duration:10})
But now the problem occurs:
The bar jumps to the top-left of the screen with this code.
I don't understand this, what am i doing wrong?
thanks for any help.
Ik denk dat ik de oplossing heb gevonden.
Voor de liefhebber:Als ik deze code ook toevoeg: transformOrigin: "left", bij de from fase, lijkt het goed te gaan.
const player = GetPlayer();
// Reference the object
const timerbar = document.querySelector("[data-acc-text='timerbar']"); // Het object in storyline heeft een alternatieve naam. Daarmee kunnen we makkelijker kopieren. Als we kopieren krijgt het object een ander ID namelijk.
const MaxTime = player.GetVar("G3_Game_Progress_Time_Max");
const TimeLeft = player.GetVar("G3_Game_Progress_Time");
// Bereken de StartScale.
const StartScale = TimeLeft / MaxTime;
// Animate in GSAP: reset and then move and scale the object.
gsap.fromTo(timerbar,
{
scaleX: StartScale, // Stel de initiële schaal in op basis van de resterende tijd
transformOrigin: "left" // Zet het transformatiepunt aan de linkerkant
},
{
scaleX: 0, // Schaal het object naar 0% van de originele grootte
transformOrigin: "left", // Zet het transformatiepunt aan de linkerkant
ease: "none", // Gebruik een lineaire animatie
duration: TimeLeft // De animatie duurt de resterende tijd
}
);
Just to add a bit.
I would like this to be my script:let player = GetPlayer();
let timerbar = document.querySelector("[data-acc-text='timerbar']");
let MaxTime = player.GetVar("G3_Game_Progress_Time_Max");
let TimeLeft = player.GetVar("G3_Game_Progress_Time");
let StartScale = TimeLeft / MaxTime;
gsap.fromTo(timerbar,
{
scaleX: StartScale,
},
{
scaleX: 0,
transformOrigin: "left",
ease: "none",
duration: TimeLeft
}
);
Ik denk dat ik de oplossing heb gevonden.
Voor de liefhebber:Als ik deze code ook toevoeg: transformOrigin: "left", bij de from fase, lijkt het goed te gaan.
const player = GetPlayer();
// Reference the object
const timerbar = document.querySelector("[data-acc-text='timerbar']"); // Het object in storyline heeft een alternatieve naam. Daarmee kunnen we makkelijker kopieren. Als we kopieren krijgt het object een ander ID namelijk.
const MaxTime = player.GetVar("G3_Game_Progress_Time_Max");
const TimeLeft = player.GetVar("G3_Game_Progress_Time");
// Bereken de StartScale.
const StartScale = TimeLeft / MaxTime;
// Animate in GSAP: reset and then move and scale the object.
gsap.fromTo(timerbar,
{
scaleX: StartScale, // Stel de initiële schaal in op basis van de resterende tijd
transformOrigin: "left" // Zet het transformatiepunt aan de linkerkant
},
{
scaleX: 0, // Schaal het object naar 0% van de originele grootte
transformOrigin: "left", // Zet het transformatiepunt aan de linkerkant
ease: "none", // Gebruik een lineaire animatie
duration: TimeLeft // De animatie duurt de resterende tijd
}
);
