Forum Discussion

DaanGroen's avatar
DaanGroen
Community Member
12 months ago
Solved

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...
  • DaanGroen's avatar
    12 months ago

    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

        }

    );