Jump to content
Search Community

GSDevTools Playback Erratic

cfx test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Guys,

 

Although I've worked with GS before, GSDevTools is new to me. I'm loving it but finding I get varying results in the playback.

 

I have some code which I'll list below and it includes a draw function then a splitText function then a fade function which are on a masterTL. I hit play and all's well but if I hit play to watch the animation again the fade gets quicker and seems to move up the timescale and if I hit play again it gets quicker still and then disappears.

 

I've tried including TL functions to reset vars but it doesn't make any difference. Obviously the code doesn't change.

 

<CODE>

/*Draw Function - makes .svg with class="badge" visible then draws it, then fades the container div #splash and all works fine*/

 

function drawBadge (){
    TweenLite.set("#coreBadge", {visibility:"visible"});
    var tl = new TimelineLite();
    tl.from(".badge", 0.6, { drawSVG: 0, delay: 0.2 });
    tl.to("#splash", 0.6, {autoAlpha: 0, display:"none"});
    return tl;
}

 

/*Split Text function - variable received to function as console confirms, makes <p> visible then performs splitText on <p> and works fine*/

 

function runText (textLine) {
  TweenLite.set(textLine, {visibility:"visible"});
  var mySplitText = new SplitText(textLine, { type: "chars" }),
  tl = new TimelineLite();
 console.log("done split ",textLine);
  tl.staggerFrom(mySplitText.chars, 0.01, { opacity: 0 }, 0.04);
  return tl;
}

 

/* Fade Function - variable received to function as console confirms, then tweens a simple repeating fade on same <p> as Split Text function and works fine first time*/

 

function hudFadeEffect (hudLine) {
  TweenMax.to(hudLine, 0.8, {delay: 0.8, alpha: 0, repeatDelay: 0.1, repeat: -1, yoyo: true});
  console.log("fade effect",hudLine);
  return hudLine;
}

 

/*Timeline*/

var masterTL = new TimelineMax();
masterTL.add(drawBadge(), 0)

.call(runText, ["#hudGenius"], 1)
.call(hudFadeEffect, ["#hudGenius"], 2)

 

What am I doing wrong?  :-(

 

I know you'd probably appreciate a pen but mine's private - I can send the url to GS superfabheroes if you want via email.

 

Buzz

 

 

 

Link to comment
Share on other sites

in cases like this it would really help if you could provide a simple demo:

 

 

I find it a bit odd that this function returns hudline, which appears to the be target of a tween

 

function hudFadeEffect (hudLine) {
  TweenMax.to(hudLine, 0.8, {delay: 0.8, alpha: 0, repeatDelay: 0.1, repeat: -1, yoyo: true});
  console.log("fade effect",hudLine);
  return hudLine;
}

 

Also, I'm not sure what you are expecting to happen with these 2 calls

 

.call(runText, ["#hudGenius"], 1)
.call(hudFadeEffect, ["#hudGenius"], 2)

 

That is not going to put the animations that runText and hudFadeEffect create into your timeline like your first add() does.

Also, every time you replay master its going to call() those 2 functions each time , spitting the text again and making new animations.

 

Definitely check out: https://css-tricks.com/writing-smarter-animation-code/ 

 

This demo below loads GSDevTools and every bonus plugin. Just fork it and add enough html / css / js to replicate your problem.

I'm sure we can offer better assistance once we see what is happening.

 

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

Thanks Carl, all sorted!

 

Both those bits of code you pointed out were the problem. The fade effect function I changed from the original tl i wrote and the return was left over from that.

 

All the events on the masterTL were originally .add (six in total) but I changed a couple to experiment as the timeline side of GSAP is new to me, my previous anims were flash and AS mostly. Anyway came back to it all cold this morning and couldn't see the wood for the trees.  I got to start working during the day again...

 

Everything is now on the timeline and the fade I changed back to a tl too. It all works fine and the GSDevTools are replaying the same every time as you would expect from this very robust platform!

 

Much obliged Green Crusader..

 

Buzz

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...