Forum Discussion

ChrisCurry's avatar
ChrisCurry
Community Member
5 years ago

TimelineLite Javascript animation issues when replaying a slide

So, I've been experimenting with using javascript and TimelineLite to loop animations in storyline (edit: on just a single slide. I am not trying to loop an animation across several slides). But I'v...
storyline 360
MathNotermans-9's avatar
MathNotermans-9
Community Member
5 years ago

I work a lot with GSAP and didnot encounter this yet. As Storyline 360 standard has  a version of GSAP 3 built in, you probably dont have to use Timelinelite anymore but can use GSAP 3 syntax...
Something like this...

var iconObject = document.querySelector("[data-acc-text='crown.png']");

var tl = gsap.timeline({repeat: -1, onComplete: doSomething});
tl.to(iconObject, 1, {scale: '+=0.10', ease: "power1.inOut",});
tl.to(iconObject, 1, {scale: '-=0.10', ease: "power1.inOut"});

function doSomething(){

console.log("doSomething onComplete");

}

It might have to do with scope of code inside Storyline. Every trigger, every slide...everything in Storyline has its own scope. So if you set a variable or timeline at a slide...the next slide doesnot know about it. Only way to make sure you can target some variables is defining them somewhere globally. That would be either in the player or at some spot in the HTML code.

I do that constantly. I have a generic_functions.js file i load at start of a Storyline. Inthere i have a lot of generic functions that i can call anytime... on any slide. Also some arrays and variables set in that js-file in which i can save some needed values.

Do hope this helps you.

Kind regards,
Math

 

  • MannyRak's avatar
    MannyRak
    Community Member
    3 years ago

    Hi, I'm fairly new to Storyline 360 and did some research before I found you are the expert in GSAP. I wanted to ask if you don't mind. I have a gsap element animating after a while in the timeline and I noticed that when I click on the rewind button on if I use the seek function, once the animation is done, it won't restart. Instead it will just jump between the before and after state.

    Any clues on how to make the animation play again if I hit the rewind/replay button? 

     

    Thanks in advance. Below is the current code I have.

        var elemanim_1 = document.querySelector("[data-acc-text='bg_circle']");
        var tl = gsap.timeline();
        tl.to(elemanim_1, {x: "85%", y: "32%", duration: 0.5 ,scale:1.6});