jonForum Posted November 15, 2019 Share Posted November 15, 2019 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` codepen 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 More sharing options...
jonForum Posted November 15, 2019 Author Share Posted November 15, 2019 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 More sharing options...
ZachSaucier Posted November 15, 2019 Share Posted November 15, 2019 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 1 Link to comment Share on other sites More sharing options...
jonForum Posted November 16, 2019 Author Share Posted November 16, 2019 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 More sharing options...
jonForum Posted November 16, 2019 Author Share Posted November 16, 2019 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. (function(){ const master = new gsap.timeline(); function ini() { const tl = new TimelineMax(); tl.call(() => { gsap.killTweensOf(source); gsap.set(source, {...target}) // others setter initialize stuff... }) return tl.to({},{}); }; master.add( ini(),'init'); })() Link to comment Share on other sites More sharing options...
jonForum Posted November 16, 2019 Author Share Posted November 16, 2019 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 More sharing options...
ZachSaucier Posted November 16, 2019 Share Posted November 16, 2019 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! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted November 16, 2019 Share Posted November 16, 2019 I believe the main problem here was: // BAD! new gsap.timeline() // GOOD gsap.timeline() // don't use "new" 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now