Jump to content


  • Posts

  • Joined

  • Last visited

kalreg's Achievements

  1. Thanks for reply, but that doesnt solve my problem. As I said, i need first animation running infinitely, and second one merges, both stop when second ends. Your example uses TweenMax as an addition to timeline, and stops everything immidiately, not when tweenMax ends.
  2. I use Vue.js and GSAP to make my app working and faced such a problem: /* load started hook */ this.tl = new TimelineMax({repeat: -1}); this.tl.staggerFromTo(bubbles, 0.6, { opacity: 0, scale: 0 }, { opacity: 1, scale: 1, ease: Elastic.easeOut }, 0.05) this.tl.staggerTo(bubbles, 0.6, { scale: 0, opacity: 0, ease: Elastic.easeIn }, 0.1) This simply makes loader and 3 bubbles scaling and changing opacity. All works fine. But since Timeline is created with repeat: -1 it runs forever. What i want to achieve is that if loading ended hook is invoked my animation still runs, but also another timeline is injected so everything fades away (opacity to 0 while still making main animation runing). What I achieved already is: /* load ended hook */ this.tl.repeat(0); this.tl.to(bubbles), 1, {opacity: 0 }) It works almost fine however (as expected) animation from loading hook started runs to the end for the one last time, and then fades away "bubbles". What i want to achieve is to run two animations simultaneously - one, from loading started hook to the end, and second fading away - in the same time, but if everything is done - kill both animations. Do i have to make two different TimelineMax()'es ? Kalreg
  3. Thank you for reply, but actually that doesnt solve the issue. In fact i did an error in my pen and "from" y-offset is same as "to", but even if i change the first one to 0 and second to 7px it still wont animate. Also color of shadow doesnt change. The only thing that is tweened correctly is background color. I updated pen so you can check the correct version that doesnt work: If you check animation you can see that i want to tween size of shadow from 10 to 20px (y-offset). Instead i get 10px and no animation. Can you please advice how to animate y-offset? Kalreg
  4. Hi, I met a problem while trying to animate filter: drop-shadow css value. Pls check codepen. What i am trying to achieve is to animate y position of shadow (making it bigger) and it's color. This pen is trying to shadow div, while in my project i try to shadow svg, but both examples works the same way - they stay as "from" value suggests and ignore "to" values. If i try to make it only with .to instead .fromTo there is also no animation - just at the end of animation shadows appear in final stage. Any ideas how to solve it? Kalreg
  5. Yes i did! Everytime i guess i know a lot about gsap it surprises me with new possibilities Thx
  6. Hi guys, After a while messing with gsap i am back with problem creating a certain animation. I guess it is more general problem with oop programing, however i count on your help. Main problem is that codepen works as it should, and if i run it in my browser it behaves differently. Here's the description of problem. I have object pop that maintains allfunction for #pop DOM element like creation, different slides, closing and so on. I want to have it divided for different methods for opening and closing before between them there are different functions. In my pen i want to remove #pop element from DOM with this.closePop() function after a while. But if i call it like this: this.closePop = function() { var tl = new TimelineMax(); tl.add(this.slidePopOut()) tl.add(this.removePop(), 2) return tl; } function this.removePop is executed immidiately so it is removed before animation is started. If I change it to: this.closePop = function() { var tl = new TimelineMax(); tl.add(this.slidePopOut()) tl.add(this.removePop, 2) return tl; } in pen it works good - element is removed at the end in animation, but in my browser it is not. Why? Because this.removePop is called with this which is Timeline object, not popClass object. So it returns error that removePop is undefined for timeline obj.. it is correct, but why does it change scope? I understand that it is hard to help me if pen works as it should but maybe you have some ideas that may pupush me into write direction. Kalreg. EDIT: i put here second codepen, shorter so maybe it would be easier to discover the problem: Func2 is called in timeline obj context so it cant call this.func3 - please check your own console.log. Here this error "works" so maybe it will be easier to help me:) DID IT BY MYSELF - TimelineMax.call() did the job. Thank you!
  7. 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.
  8. 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
  9. 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...
  10. 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
  11. 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.
  12. 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 ?
  13. 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
  14. 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
  15. 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.