Hi there!
I have a question about how timelines are managed in GSAP 3.
While a timeline's animation is running, in the js console I seem to be able to use:
gsap.globalTimeline.restart();
If the animation has finished it ignores the restart completely.
I can only get it to restart if call it while it's running.
The project is a game, this is a particular scene, where I will need to restart the timeline and set a different player (between 1 and 4).
Also as we're looking to use VUE.js as a single page application I expect will need a master timeline per scene.
It's a bit complicated and a client/work related so I can't post it on codepen.
If I can get this working and convince the team to use it then definitely interested in becoming a green sock member.
There's nothing as powerful as GSAP for timeline management so definitely need to get this working.
It's also worth mentioning during the script I can log the variables for the timelines I've created (tl) when the script runs, but not after it's finished running.
Please ignore primarily what the animations are doing - as they're working well (it's a responsive scene of a player jumping over a bar then crying when they lose lol). It's mostly just being able to reset / rewind etc the main timeline and each other individual ones. As I can't seem to get either to work.
$(document).ready(function () {
var pCurrentPlayerNumber = 1;
var currentplayer = ".player" + pCurrentPlayerNumber;
var currentplayerwrapper = ".player" + pCurrentPlayerNumber + "-wrapper";
console.log(currentplayer);
console.log(currentplayerwrapper);
var tlSetStage = gsap.timeline();
tlSetStage.set(currentplayer, {className: "+=visible"})
.set(currentplayerwrapper, {className: "+=centercenter"})
.set(".currentplayername", {className: "+=p" + pCurrentPlayerNumber + "-bg"})
.set(currentplayerwrapper, {transform: "translateZ(200px)"})
.set(".highjump-set.fg", {transform: "translateZ(400px)"})
.set(".highjump-set", {className: "+=centercenter"})
.set(".highjump-set", {xPercent: 300});
var tl = gsap.timeline();
tl.set(currentplayerwrapper, {xPercent: -300, yPercent:-50})
.set(".highjump-set", {xPercent: 300})
.set(currentplayer, {className: "+=stancePlayerRunFast"})
.to(currentplayerwrapper, {xPercent: "+=200", yPercent:-50, duration: 1, delay:1})
.to(".highjump-set", {xPercent: "-=280", yPercent:-50, duration: 1, delay:0},1)
.set(currentplayer, {className: "-=stancePlayerRunFast"})
.set(currentplayer, {className: "+=stancePlayerJump"})
.to(currentplayerwrapper, {xPercent: "+=50", rotationY:-180, yPercent:-50, duration: 0.5})
.to(".highjump-set", {xPercent: "-=10", yPercent:-50, duration: 1, delay:0},2)
.set(currentplayer, {className: "+=aniPlayerPaused"})
.to(currentplayerwrapper, {xPercent: "+=10", rotationY:-180, yPercent: -80, rotationZ: 50, ease: "power4.Out", duration: 0.5})
.to(".highjump-set", {xPercent: "-=20", yPercent:-50, duration: 1, delay:0},3)
.to(".highjump-pole-hoz", {xPercent: "+=70", yPercent:"+=330", duration: 0.5, delay:0},3)
.to(".highjump-pole-hoz", {yPercent:"-=190", duration: 0.5, delay:0},3.5)
.to(".highjump-pole-hoz", {xPercent: "+=20", yPercent:"+=220", duration: 0.5, delay:0},4)
.to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, yPercent: -20, rotationZ: 100, ease: "power4.Out", duration: 0.5},4)
.to(".highjump-set", {xPercent: "-=20", yPercent:-50, duration: 1, delay:0},4)
.to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, duration: 2})
.set(currentplayer, {className: "-=stancePlayerJump"})
.to(currentplayerwrapper, {xPercent: "+=20", rotationY:-180, rotationZ: 0, duration: 0.5})
.set(currentplayer, {className: "-=aniPlayerPaused"})
.set(currentplayer, {className: "+=stancePlayerCry"})
.to(currentplayerwrapper, {rotationY:-180, rotationZ: 0, duration: 2});
console.log(tl);
});
If I try to restart them using the below command I get a not defined error. Should I be doing each timeline as a function?
tl.restart(); or tlSetStage.restart();
Ideally if I can at least just get the master timeline to reset at this stage it would be a win.
Being able to reset individual timelines would also be great.
Any help very much appreciated!