Search the Community

Hi there, I am really struggling to figure out why this isn't working.... and it's so close I do not want to give up on it. For some reason anytime I tween to 0.5 in the timeline it completely skips over it and goes to 1. This happens when I manually set the value to 0.5 - Even without Labels it refuses to work. I have 3 buttons, so I want them to trigger to 0, 0.5, and 1. Console logging the progress confirms this is where the 2nd button should go. However, it goes to 1 no matter what? Is it rounding up? Testing with 0, 0.33, 0.66 works but that is not the correct position. Thanks in advance for any suggestions.

Hi Jack/Carl/forum gurus, It's been a very long time! I think I need some general platform- and tech-agnostic strategy advice about how to allow a user to edit a timeline during use. I would very much appreciate any thoughts from anyone. Please forgive me if this is long, but I hope it's not overly complicated. I just want to lay out the needed detail. I need to simulate a simplified GPS-like experience with a follower on a path. For the sake of discussion, imagine a route on a map that you must walk to get from point A to point B. That's working just fine but three critical points are giving me pause. The speed will change constantly (slowing down, speeding up, and stopping for periods of rest). The user must edit the points at which the changes occur, and the times involved. The user must be able to scrub through the animation to position the follower, and then enter values into a table for the tween durations. Thereafter, the animation must be updated each tie the data is edited. The total duration of the "trip" is fixed. So I'm hoping for recommendations (or possibly just confirmation) on what I think is the need to REbuild the animation cyclically. I assume the best thing is to give you a few ideas of what I think I should do and invite better solutions/any points I may be missing. My initial assumption was that the best way to do this was to build a timeline of multiple tweens. I considered adding labels to one tween but, considering other givens that I'll include, didn't see any advantage of one approach over the other. I'm open to ideas. In order for the user to position the follower at any point during the editing phase, there must be an initial tween so the user can scrub a slider to move the follower along the path. Ideally that time can start out as arbitrary, and I'm near certain I have to rebuild the timeline multiple times so that shouldn't matter. But it's also possible for me to insist that the user begin with the maximum time. That will be known in advance, but may change (circling back to the need to rebuild often). Tweening the progress of the follower along the path will always use values of 0 to 1, and the path will never change. But the duration of each mini segment along the path will not only vary, it will likely change during editing. (E.g., the first leg is walking from house to store. Second leg is from store to park. But the author may later change that to leg 1 is running to the store, an inserted leg two will be resting for a short time, and leg three will be from store to park.) I think my biggest question is how to handle the duration of the entire timeline during editing. Something like: To allow the author to play immediately, create a first tween of the follower using any arbitrary time. (Assume 1 second.) Playback is inconsequential, as only the scrubber will be used to move the follower along the path. At this point, we have a timeline of one tween. If the fixed max duration is known (let's say 100 seconds), I can use that instead of an arbitrary time, but I can't see how it matters. Again, open to learning. Author adds a keyframe for leg one, which results in changing the first tween from progress 0 to 1 over 100 seconds, to from progress 0 to .10 over 10 seconds. However, I still need the user to be able to move the follower along the entire path, so I need to create another tween--behind the scenes--to make up the rest of the journey. I can add an arbitrary time for scrubbing or, if the total time is known, add the balance. In other words, I can now add a tween from progress .10 to 1 that lasts either 1 second, or 90 seconds if I know the max duration and can subtract 10 from 100. The rest is rinse and repeat. Here's a hypothetical example: Tween progress 0-1 for 1 second. Max time becomes known so rebuild initial tween for 100 seconds. First leg inserted, 0-0.10 for 10 seconds. Add another tween 0.10-1 for 90 seconds. Second leg inserted, 0.10 to 0.20 for 10 seconds. Rebuild resulting in three tweens, the last from 0.20-1 for 80 seconds. First leg is lengthened to 20 seconds. Rebuild resulting in three tweens, 0-0.10 for 20 seconds, 0.10-0.20 for 10 seconds, and balance of 0.20-1 for 70 seconds and so on. Some obvious questions that spring to mind are: Are there any compelling reasons to create one tween of the max time and rebuild each time using label positions? Is that not the same general process? Can anyone think of a better way? For example is there an easier way to cut up one master tween, rather than adding component parts to sum up the total duration, that would be easier? Is there a recommended process for rebuilding the timeline upon each edit? Because I can just wipe everything out and start over, and this is during the editing process, I don't currently see a need to carefully tear anything down killing tweens, concerning myself with existing callbacks, etc. I can just "nullify" everything and start over each time, if needed. It would be very nice to be able to "rebuild" as transparently as possible, but don't want to make anything overly complicated. Thanks very much for taking the time to read this.

Hi, I can't make this animation do what I want it to do, I can not understand why. I have a button that calls function menuAnimation which plays my timeline, based on condition whether variable is_menu_active is true or false. My problem is that the tween from START_MENU to PAUSE_MENU skips pointerEvents:all, does not stops at label ''pause_menu, then goes to the next step pointerEvents:none. What is wrong with this code? Thank you. btn_menu.addEventListener('click', (e) => { e.preventDefault(); menuAnimation(); }); var tl_menu_animation = gsap.timeline({ defaults:{ ease: "power2.inOut" }, paused:true }); tl_menu_animation.addLabel('start_menu') .set('#nav_left,#nav_right', {autoAlpha:1}) .to('#nav_left,#nav_right', {duration:0.7, scaleX:1}) .to(nav_elems, {duration:0.4, autoAlpha:1}) .set('#navigation', {'pointerEvents':'all'}) .addLabel('pause_menu') .set('#navigation', {'pointerEvents':'none'}) .to(nav_elems, {duration:0.2, autoAlpha:0}) .to('#nav_left,#nav_right', {duration:0.4, autoAlpha:0}) .set('#nav_left,#nav_right', {autoAlpha:0}) .set('#nav_left,#nav_right', {scaleX:0}) .addLabel('end_menu'); function menuAnimation() { if(is_menu_active) { tl_menu_animation.tweenFromTo('pause_menu', 'end_menu'); is_menu_active = false; } else { tl_menu_animation.tweenFromTo('start_menu', 'pause_menu'); is_menu_active = true; } }

Codepen doesnt work btw dont know why.. Hey guys what i want to do: animate them out of the screen then animate them all 3 at once back. How do i do this? i commented out the .from because it will do that first and then the rest of the code. Why is this? Ty guys

Good evening, We having some problem with Drawsvg Plugin. I try to explain what is our problem: In this case, I have a Timeline, with the three states of some button ( the labels "over", "out" and "cli" severaly). In the third state ( the last), it launch the event "click" to execute the code in the "cli" Label. But, as we could see in the developer inspector, the property stroke-dasharray has changed when the DrawSVG is doing when we don´t change this element (polyline class="st1") in anytime. In the inspector you can see this value: stroke-dasharray: 0px, 999999px; Here we put the URL of the codePen that I make like a example: http://codepen.io/stoicom/pen/rrdAJj If you should take a look, and tell me which could be the problem, or error? Thank you very much for yout support. Best Regards!! Rogelio Silván.

Hello! I am building a timeline visualizer, that you can easily connect with any timelines you've made with gsap. The idea is to represent the timeline visually, and let the user scrub through it. It's easy to visualize the labels, since there is a _labels property on each timelinelite instance. However, what I would like to know is: Is there any good way to get a reference to all tweens within a timeline, and all function calls? I'd like to know the time and duration of all tweens within a timeline so I can represent them visually, and also the time and name of all function calls within a timeline. Is this possible? Thank you. /Alexander

Is it possible to move labels around dynamically after they have been created? The reason I ask is that the parameters of my tweens are changing dynamically in realtime. If the start and end point of the tween moves, then I have to remove the tween from the timeline, and insert a new tween with the new parameters. What would be very nice, is if I can create the tweens based on labeled positions, and then move those labels dynamically...with the start points of those tweens moving accordingly. Is this possible? Thanks.

Does anyone know if it's possible to assign a label to a sequence when that sequence is already relative to another label? for instance: tl.to("#redBox", 1, {x:550}, "start") .to("#blueBox", 1, {x:550}, "start+=0.05", "second") .to("#greenBox", 1 {x:550}, "second+=1"); You can see the codepen here http://codepen.io/anon/pen/vLtlg But from this snippit you see that the bluebox starts relative to start, and I want greenbox to start relative to bluebox. Is this possible?

Hello... first of all amazing library, so useful. I've been getting to know the library and am trying to make a single master timeline that has different "scenes", then user interaction can play from one scene to the next, stop, and wait from user input. One thing I've found, however, is that if you have an infinitely repeated animation, this will effectively push the playhead to a huge time in the future (representing "infinity" i'm assuming), then any label added after this will be at that point in the future. Very simple example here: http://jsfiddle.net/NK3pe/2/ I don't want to jump to conclusions and my approach might certainly be wrong, but wouldn't it make more sense that infinitely repeated animations should not affect the timeline head, as it's assumed that you wouldn't/couldn't put anything after them anyway? I've looked around the forums and have seen example that pull the tween out of the flow and use callbacks to restart it, etc, but is all that really necessary or is there a simple way that I'm missing? The problem wouldn't be so bad except that even nested timelines affect their parents, so even one nested repeating animation will effectively push the master's playhead out to infinity. Also, I realize that I can add an absolute position to subsequent tweens, but then I would have to add them to ALL tweens after a repeated one, and have to tweak each one if an earlier animation duration changed, etc... Is there something basic I'm missing here?

hi as well as playing back an animated visualisation I want to users to be able to jump from point to point. If I set labels in the animation they point to the start of an animation sequence not its end point. While I can use getLabelAfter() etc + an offset that seems a kludge Is there a means to go to a label play back that sequence & stop? I've got a simple codepen derived demo at: http://thisthen.co.uk/gsaptest/ Mark

Hi - In the video it shows how you can animate between Home, Schhol, Work and Movies. Labels on the stage. I am trying to do this in Flash CS6. I have 4 buttons, and 4 labels with a Flash Tweened animation. I can not find any downloads in Flash and am a bit stuck. Can ayone point me in the right direction please? http://active.tutsplus.com/tutorials/animation/timelinelite-ultimate-starter-guide-introduction/

I see that I can start the animation from a label with tl.play("skew") but is it possible to stop the animation at a label? Thanks

I have a short slideshow with animated slides. I'm trying to have some buttons call up each slide as they are clicked but I'm having trouble getting the buttons to function. I suppose I am having difficulty understanding how to apply labels and how to skip to those labels in the timeline from a click. Does anyone know of a tutorial that covers this kind of stuff? Thanks.