kalreg

Members
  • Content count

    29
  • Joined

  • Last visited

Community Reputation

5 Newbie

About kalreg

  • Rank
    Member
  1. Actually after more research mainTimeline = exportRoot({ onComplete: callback }) works quite fine for my needs as well as queue engine and event listener (end on main timeline). It needs some modifications but it is a good start. Hope that helps anybody.
  2. Hi, I wonder if i can check for any currently active timelines. Here is why: I have many timelines, with many calls to different functions and all they refer to different DOM objects. Now i want to prevent playing new animations (or queue it) if any other animation is currently being played. Since i havent found anything useful in documentation (except exportRoot but that doesnt suits my need) i want to know if i can check if any timeline of any DOM is currently being played. I think about something like this: if ( TweenMax.isActive() ) { // add new animation to queue } else { // call new animation } Is that somehow possible? Kalreg
  3. Hi Jack. Thank you for fast reply. Stagger wouldnt apply in my case because stagger accepts dom objects instead of functions, however my approach from first post wasnt working because of my error - your listing shows it works and i coded it on codepen and it magically worked - then i studied my case and found simple human error. So thank you and consider it solved Dummy Kalreg... dummy Kalreg...
  4. Hello, I am wondering if there is a way to put tl.add() command into a loop to have cascade start of animation like this: var abc = { xyz: function (obj) { var tl = new TimelineMax(); tl.fromTo(obj, 3, { opacity: 0 }, { opacity: 1 }) return tl } } var tl = new TimelineMax(); DOMS.each(function (index) { tl.add(abc.xyz(DOMS[index]), "+=" + index) } ) Consider DOMs as array of any DOM objects. However this approach doesnt work. Same effect may be achieved with this: tl.add(abc.xyz(DOMS[0]), "+=0") tl.add(abc.xyz(DOMS[1]), "+=1") tl.add(abc.xyz(DOMS[2]), "+=2") But i am searching for more dynamic way depending on length of DOMS array. Is that possible to have time position dynamically set? I do not post codepen, i hope it is obvious what is the problem here Kalreg
  5. Probably setting var mainAnimation = new TimelineMax({autoRemoveChildren: true}); fix the issue, but until more tests i wont make this thread solved. However still in my opinion it should work anyways without setting autoRemoveChildren.
  6. Hi all, While making my project i use my own queueing function, which was made with help of this forum. Although it works as expected for most of time it sometimes crashes. It wouldnt be strange if it wouldnt crash in completely random moments. You can check my codepen, here is description what is going on, and later my expectation and where bug possibly exists. WHAT IS GOING ON: 1. I create mainAnimation timeline. It will hold information if any added earlier animation is being played. It prevents to play multiple animations in the same moment. 2. I call queue.add(box.move, 100). Add is queue object method for adding both function (first parameter) and parameter (second parameter). 3. queue.add simply adds parameters to an array called queue.array like { fnc: box.move, vars: 100 } and later calls queue.next 4. queue.next checks if mainAnimation is being played. If so do nothing (wait), otherwise add first animation from queue.array to mainAnimation, and add queue.next to the end od mainAnimation. 5. that loop works as long as there is anything to add. HOW TO RUN INTO BUG As you probably see i added 43 times queue.add(box.move, POSITION) at the end of js file; There is console.log that counts length of array with each queue.next call. It should count from 43 to 0 . Why 43? Just because this bug doesnt happen everytime - sometimes happen, sometimes not, so 43 is just for more chance to run into bug What is bug? Watch carefully for countdown if it goes from 43 to 0. If it stops on random number (20, 27, 32 or any other) - you were witness of buggy behaviour. If it doesnt happen when you run it for first time, try second or third... after ten times bug will surely occur. WHAT IS WRONG? Why does it stop running next and next animation? It should run through all 43 steps to the last one. not stop earlier, and surely it shouldnt sometimes run from 43 to 0, and later from 43 to 25 and so on. The problem is in condition mainAnimation.isActive() - line 20 of codepen. Although duration() is same as time() (check console log) and totalprogress() return 1, isActive return true. I expect that if queue.next is added to mainAnimation after calling queue.add it will be called after completion of queue.add. If so there should not be any activity in mainAnimation. Although for most of situatuin it works as intended, sometimes it is not. To be honest i have no idea why same calls returns different behaviour. Am i missing something or is it in fact a bug? If not, how to correct my function to run animation through all steps - from first to last each time i run my program? Any ideas from gsap masters of wisdom ?
  7. First of all i want to thank you a lot for both - solutions and explanations. It shed o lot of light for not only gsap, but also other javascript functions. @Carl: Your solution works perfectly fine. And all that because fn.callback() instead of fn.callback. I was so close . Sorry was not clarifying what is desired result, next time i will describe it more clearly. Thank you so much, also fo private message. @OSUBlake: I like your solution with promises very... promising. I tried to adapt your first codepen to my project, however thinking in promises way is quite new for me. Anyways i think that such a solution is perfect one for queueing like mine. I digged a little bit but the thing that blocked me is dynamic chaining. What do i mean. In your example you have promise .then ({ some code }) .then ({ some code }) .then ({ some code }) .then ({ some code }) It works perfectly clear to me, however it is a programmer who decides how many "thens" there is (in that case - four), not a user or any variable. Is there a way to - for example - if i click button twice add second "then" (second promise?) to first one? And if there is third click in a meantime - the third promise will be added? I am talking about about promises added to promises. I hope you know what i mean. I know that it is not a gsap question, however i count for any advice or links to pens/tutorials @PointC: i also known that something like promises is there somewhere but didnt know how or when to use it. thanks to blake my studpidity is a little bit smaller Once again - you all of you are like my personal heroes.. with green cape
  8. Hi guys, I am still struggling with queueing callbacks and next (nested) timelines however strange problem occured to me. Please check my codepen: On line 20 you have isActive() check, however if animation is being played (press m to start animation, and press it again to queue next part, during first play) you can see that the result of check is always false. Why is that? I tried with some solution with export root, however without any luck. How to get true when animation is being played? There is also different problem. On line 28 there is tl.play() command. I added it because my animation didnt even started without it, i do not know why. I would expect that after adding lines 24 and 27 it would automatically run, but it didnt. Why didnt it run and is that really necessery to play it via tl.play? What is interesting to me, if i unhash line 25 (which is "tl.to" command) it will run without tl.play(), but i need to use tl.add/call instead of tl.to - i need real callbacks instead of animation. I guess both problems are connected - after unhashing tl.to isActive returns true - but i leave it to you - ppl with wisdom. Hope to get any suggestions from you. EDIT: i commented whole pen for you guys to make it more clear. Hope it helps
  9. Here you can find my solution to the problem above. Not implemented in my project but i hope it will help anybody with queing tweens and callbacks. Working codepen here: http://codepen.io/kalreg/pen/pepajJ?editors=1111 Surely not best looking solution but working. Thanks all for help Carl, Jack, and PointC.
  10. PointC that is what i exactly want to do and i am starting to make "shift array on callback" approach, but more oop than blake. When i finish i will share it with rest of gsap forum
  11. Yes, i do want to queue tweens, but also callbacks. I've been thinking about storing in array tweens or animated dom objects and removing them when animation finishes, but i hoped that gsap has some more simple solutions to queue both callbacks and tweens in one chain. Here is next pen for you guys: http://codepen.io/kalreg/pen/gmoLdY?editors=1111 I want to have queued: -- first call of obj.myFunc change color of text to red (call myFunc) and then change color of text to red (call myFunc2) and then change color of text to red (call myFunc3) and then -- second call of obj.myFunc change color of text to red (call myFunc) and then change color of text to red (call myFunc2) and then change color of text to red (call myFunc3) and then -- first call of obj.myFunc4 change color of text to magenta All callbacks are queued in order i started them honouring that myFunc calls myFunc2, it calls myFunc3 and when it finishes - call again myFunc and so on... Is that even possible? I am sitting with it for 24hours now and no luck:(
  12. It clears a little, but unfortunatelly doesnt solve my problem. First of all thank you PointC for "this" usage, and Jack for so complete explanation. Jack: I use mainAnimation as a controller that is telling me if any animation is in progress. Because i can animate many divs from different kinds and purposes i need to know if any animation is in progress. So i add any tween to mainAnimation. If for example button is currently animated, and user clicks different button i do not want to play second button animation immidiately, but i want it go to queue. When first button finishes animation, the second will be animated since i added all animation tweens to mainAnimation. I didnt know that mainAnimation is in progress all the time - i thought if there is nothing added (or all animations have ended) it stops untill next tween is added. Anyways what i want to achieve is (i try to simplify everything as much as possible): 1. add tweens on click event attached to button 2. if user clicks button check conditions: a/ if none of the buttons is currently animated - start animating it by adding tweens of button to mainAnimation b/ if any button (or any other entity) is currently animated (which means that it is added to mainAnimation), add currently clicked entity tweening to end of queue in mainAnimation Problems: 1. there may be different objects animated - divs, buttons, different classes, it is hard to find something in common for isActive() usage; 2. tweens, are not only animations, but also normal code like defining variables depending on what is going on, creating dom objects, so if i add something to the end of mainAnimation i expect all the code will be executed in moment of starting the animation (when all other animation finishes). So any variable/dom check refers to the moment that certain tween is being played, not checked in moment of adding tween to mainAnimation. I updated codepen: http://codepen.io/kalreg/pen/VpyLER?editors=0011 What i do is: 1. i press key "m" which calls tripple times myFunc with red, later green and later blue parameter 2. right after pressing "m" i press "n" which calls myFunc3. What i expect: 1. myFunc is called 3 times with different color. Because each myFunc also adds call of myFunc2 i expect that it would add MyFunc("red") to mainAnimation, then myFunc2, then("green"), and myFunc2 again and so on. 2. because myFunc3 is called after myFunc and myFunc2 it should be added at the end of mainAnimation so expected behaviour should be: Text change: from white to red from black to orange from orange to green from black to orange from black to blue from blue to magenta and console output should be: A: 1 1 1 B: 2 2 2 3 As you can see on codepen both output and color behaviour is completely different. Is that possible to achieve what i expect? Thank you! K.
  13. Hi guys. Probably Carl seeing my new post is starting to shake but where can i go and ask if not here? I am still struggling with .call and .add but cant figure out how to use it correctly. I've attached codepen for you to understand a problem. Here is short description. If i press "m" call of obj.myFunc on mainAnimation should be started which should set color of text in body to red after 2 seconds. That never happens. If you check more closely whole obj.myFunc is not even called: Now, if i change: mainAnimation.call(obj.myFunc, ["abcd"], "+=2") to mainAnimation.call(obj.myFunc(), ["abcd"], "+=2") myFunc is called, but without any parameter and without 2 second delay. Now, if i change it to: mainAnimation.call(obj.myFunc("abcd"), [], "+=2") myFunc is called with parameter ("abcd"), but still - no 2 second delay. What am i missing? I intend to add a call of function to mainAnimation with some delay. Also Carl said that using .call(func) is good instead of .call(func()) which is bad. Why is that bad? What is the difference? Kalreg
  14. As always Carl, u solve first world problems Thank you.
  15. So maybe in simpler words. 1. I want to have master timeline that is nesting other tweens. 2. Those tweens may be special or normal 3. normal tween is added to master timeline (at the end of it) 4. special tween should be played immidiately in moment it is added to master timeline (i know how to play it instantly, but it need to be added to master timeline. The question is: Is there any easy way to masterTl.add(myTween, NOW) I already coded it using tl.duration() and tl.progress() - i caluculate what is current progress of animation vs duration and add -=result, but maybe there is any simpler way? Hope it cleared a bit.