dghez

Yup. Thanks anyway Actually after the slack discussion I forgot about this question.

Hi everyone! I'm currently trying to create a function that plays a timeline, add to that a callback function that play another random timeline, with a callback to another etc.. (something like a recursion) In example: In have some timelines (7/8) and I want to play them one after one completely random, endless. I really can't find any error, in my mind this can work but in real it doesn't. I works for the first one / two iterations then it goes in a insanely loop function playRoutes(){ var randValue = Math.floor(Math.random() * (globeHandler.routes.length)); var route = globeHandler.routes[randValue].timeline; route.timeline.eventCallback('onComplete', playRoutes); route.timeline.play(); } playRoutes(); Here is the console.log o the random value, as you can see is called very fast. Any idea?

So essentially I should declare every click the timeline, otherwise it takes the original values of when I declared it. Am i right?

Hi everyone, I recreated a codepen that replicate more or less my problem (for using that click somewhere in the white area) I'm trying to achieve something like the one you can see. I need to open a "fixed popup" that everytime change it's initial position. If you try the pen everything works fine for the only first click but if you try to click again you can see that the "modal" still opening from the position you clicked the first time. Can anyone explain whats is going on? ps: I added a delay so you can see clearly what's is going on. Thanks eveyone!

Hi everyone, my situation is this: I have two timelines, one for the loading initial animation and another one for the coreography when the page is loaded. The animation of the loader (a spinner) is made more or less the same as the codepen linked but in this way, as you can see, the rotation doesn't stop properly. (In simple words i want to pause the rotation animation WHEN the page is loaded, but I doesn't want to stop that if it's still moving) tlTimeline .to(test, 1, {rotation: "+=90", repeat: -1, repeatDelay: 1, onRepeat: loaded}); function loaded(){ tlTimeline.pause(); tlOpening.play(); //this one is not included in the codepen } I need to find another way to stop the repeat animation at the end of the repeat animation because in this way it makes a little step forwards.

Hi everyone, in simple words here is what I'm trying to achieve: Start an infinite animation when the user hover a div Pause the animation when the user leave, but after the animation is completed. I recreated a codepen as you can see, when I go out of the svg, the animation goes to the end but after it doesn't start anymore. ps: I tried to add play(0) but it will play once (probably because of the callback onRepeat) EDIT: while posting I had an idea and looks like it works I just remove the onRepeat callback on the mouseEnter in this way: $("svg").hover(function() { hoverDog.play(); hoverDog.eventCallback("onRepeat", function(){}); }, function() { hoverDog.eventCallback("onRepeat", function(){ hoverDog.pause();}); });

Acccent thanks, I really appreciate that! I'm going to check what .invalidate() function does because I've never heard it. Talking about the funtion randomstars I saw that you put it into a timeline with a repeat:-1 and yoyo:true, keeping my settings (the random values function inside staggerTo) but in your case (you can see that) the random function is working only the first time, when the timeline is initialized, so the stars always follow the path from A -> B and not randomly. In the original one, I used TweenMax.staggerTo because in this way the values/path changes every time A -> B -> C -> D ..... etc. How can we solve that? Thanks again!

First of Carl thanks for the reply Btw, let me explain better. I divide the timeline in this way: - tlMain: is where I create the main timeline (tlOpening + tlFunny (tlFunny is the timeline of the jumping ghost)) - tlLeaving: is the timeline for let the stuff go away. - tlRewind: is the timeline for the rewind cta If you run the animation for the first time everything is fine, then at the end if you click replay and the end of the tlRewind there is a callback with tlMain.restart() e tlLeaving.pause(0), [tlLeaving.pause(0) is needed to bring the time of the timeline to 0 and ready to play again] BUT on the second time of the animation you can see that only the ghost & the texts are leaving (that's the different behavior i'm trying to fix).

Hi everyone, like you can see in the codePen I'm working on something like an app-onboarding. It's one of my first "serious" TweenMax project and I'm still not a pro so maybe you can see some errors somewhere, but my question is another. Like you can see at the end I would restart the entire animation, but I made it with a main timeline and some secondary timelines (some are nested inside the main one, some are external). Like you can see if you try to restart the animation more than one time something is going wrong, and I cannot understand why because in you check the "onComplete" function I set the other timeline to the beginning using "tlLeaving.play(0)". What am I doing wrong? Thanks!

Hi everyone. I set a infinite timeline with some callbacks onComplete & onRepeat that change numbers around the page. I'm working into an ember application, so because of my timeline is infinite and change numbers in the page I need to kill everything when the user leave the page to another, otherwise when he will come back the new timeline initialization will mess-up the design. I tried with the function mytimeline.kill() but looks like it doesn't work. Any idea on how to solve? Cheers! ps: it's difficult to provide a codepen in this case sorry