Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

tl.set tl.call bug ?

Recommended Posts

hum i think i get another weird bug here with my current timeLine setup in my project.
All my event seem broken.
I think values are not compute on .set().

Here the small context of userCase.

You should see 2 console.log
1:'call:0 succeed'
2:' a:10, b:10, c:0'


we don't get the log  'call:0 succeed', if the timeLine times are 0.
if we add example time = 1, we get 'call:0 succeed', but set values seem not hacked, and leaved to `a:0, b:0, c:0`



Can you confirm, or something change in the core ?

See the Pen JjjeYRO by djmisterjon (@djmisterjon) on CodePen

Link to comment
Share on other sites

ok it will teach me to use a browser debug inspector!
Waste time here, don't use vivaldi chromium with codePen ! all console log are wrong, also the one include in codePen.
It completely lost me!
Working on fireFox.

Link to comment
Share on other sites

Hey Jon, a couple things are going on here.


First, you have a timeline with no duration. You only have .set() and .call() in it, so it has no duration and GSAP is likely to not play it (why use a timeline for that if you can just do it without a timeline? @GreenSock the same issue popped up again). 


Second, tweens and timelines run on the next animation frame. calls like console.log('setMe:',setMe); run immediately. So there's a (good) chance in your setup that the console.log runs before the first requestAnimationFrame call of the timeline, thus the values are not as you'd expect. 


You can remedy these issues by adding an empty tween to your timeline (so that the timeline has a duration) and putting the console.log inside of a requestAnimationFrame call:


See the Pen wvvQJKW?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey thanks @ZachSaucier

Yep i understand now ,for the console in codePen, logicly i was thinked the getter open on async values and computed the values after like Developer tool, but now i understand.
And the console log in developer tool not showed, it a know Bug from Vivaldi dev forum, so it why i was lost on debugging here.

So now , don't ask me why, my events worked fine in gsap2, in gsap 3 i need refactoring all my events systems because it broken.
This is fine, but i have difficulty to think about the new process in my timeLine events with some features.



This is my current issue.
To make it simple, how can I get A, B, C as order in log but keeping this similar structure!

I understand after deep debug my events, what broken in my camera engine, as you can see here,

the log  C give {a:0,b:0c:0}
But if you comment the line 16,

the log C work fine and give {a:100,b:100c:100}
How i can log A,B,C and call killTweensOf  in timeLine?

See the Pen BaaGxbZ by djmisterjon (@djmisterjon) on CodePen


Thanks in advance and also for the tips of empty tween , it work fine for me.

I hope you understand with a visual, I am a bit rusty sometime in english sorry..

Link to comment
Share on other sites

ok i think i found my solution, i think this way can be ok, i will try refactorings my initializes steps from events like this for gsap3.
My first test seem work and i don't get strange behavior..

So i will encapsulate all gsap.set in a call like this in my timeLine. :)

    const master = new gsap.timeline();
    function ini() {
      const tl = new TimelineMax();
      tl.call(() => {
        gsap.set(source, {...target})
        // others setter initialize stuff...
      return tl.to({},{});

    master.add( ini(),'init');


Link to comment
Share on other sites

OKK , here the hell solution for gsap 3
i use getById, and all work fine.


Test it, 

if you use line 21 instead of line 22 all will broke, .
killTweensOf seem also kill the current timeLine, so with id this fix all.

So it ok guys tanks, i share solution if somebody have same issue gsap2=>gsap3.
I love now the id manager from gsap.

See the Pen WNNYgjp by djmisterjon (@djmisterjon) on CodePen


Link to comment
Share on other sites

I really don't understand what you're trying to do here :) 


Some notes about your code though:

  • It's good to use gsap.timeline instead of  new TimelineMax.
  • GSAP's delayedCall is more reliable than a setTimeout.
  • If all you have is one tween within a timeline there's usually not much of a point of adding it to a timeline. You can assign the ID to the tween if you'd like and it'd work the same way.
  • You have gsap.set(source, {...target}) but target is already an object so you could just do gsap.set(source, target) if you want.

I'm glad you got it working for your needs!

  • Thanks 1
Link to comment
Share on other sites

I believe the main problem here was: 

// BAD!
new gsap.timeline()

gsap.timeline() // don't use "new"


  • 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.