biljohns

?and thanks for the scope video.

@ Blake Am I achieving the same thing by doing a check of isActive() and running prevent default and propagation?

Pretty close. Most importantly, I think that was the knowledge gap I needed filled. I thought once a timeline was created, it could only be "modified" (not overwritten). I see every time animateToState is called, it is overwriting tl in memory. This is why in my examples I was trying to create a timeline and based on a condition(s), clear the previous tweens from said timeline.

@ Zach With that timeline in your example, based on state, you just keep adding tweens to the same timeline every time state is changed? I was under the impression that I have a timeline and set tweens stay with said timeline. That timeline then plays said tweens (whatever has been added to that timeline sequence) unless I clear said timeline.

@ Blake In order of operations: Note: On init, both left pane and right pane are offscreen. 1. Left pane comes on to screen with buttons and a label animated via a drop down selection. 2. Right pane comes on to screen with buttons and a label animated via a button found on the left pane. (this here triggers the 50/50 split) 3. Left pane can condense down from 50/50 to a mobile width via a button on the left pane. 4. Right pane can be closed via a button on either the left or right pane in either 50/50 split or left pane condensed.

I do not have a related video or demo. I will try to explain. I'm creating a small application that shows a developed webpage and a design image which was used to develop the webpage. left pane - developed webpage right pane - design image The left pane is the actual development work (webpage that lives in an iframe). The right pane will be the design image (image that lives in a div). If the window width is wide enough (desktop), the left pane will have the ability to condense down to view the iframe webpage in a mobile state (so the user doesnt have to resize their window. If the window gets too narrow, that feature is hidden. If the window gets down to a mobile size, the view is no longer a 50/50 split. Mobile has it that left pane would take 100 percent of the screen and vice versa depending which pane the user wants in view. Does that help?

At this point, gsap is just making me frustrated and a ball of confusion. I have heard so many great things about it, but have not experienced those great things. I feel I just should have stuck with css animations at this point and am just ready to back track my entire project. I would just use tweens, but this project is nearing 1000 lines long (not big - this was supposed to be a small project) with me just trying to reverse timelines. If I do nothing but tweens, it will just bloat the project (redundant animation code). I was hoping to use timelines for these reasons: 1. not have to be in tween delay hell 2. my actions i am performing are just in reverse when a button click event occurs 3. keep redundant code out of the project To make matters worse, if your animations are different between desktop and mobile, I have yet to find a good way to manage tweens or timelines. Going back to your suggestion of state and tweens, this is how i am interpreting it: State = Y If desktop... Depending if I am coming from state X (state prior), perform animation A. Depending if I am coming from state Z (state after), perform animation B. If mobile... Depending if I am coming from state X (state prior), perform animation C. Depending if I am coming from state Z (state after), perform animation D. Am I understanding your strategy correctly? That is 4 different animations that have to be created per state. Timelines I have right now sit a 8-10 tweens. Timelines seem to fall flat on their face when you try to add logic that looks to be mobile and desktop friendly and playing with reversing. Not to mention, making sure all this still works if a user resizes the window as animations between desktop and mobile are different. Honestly not sure what I should do at this point. My biggest issue is results are not predictable. When you think you have something working or know how it works, you don't

Correct. Though, on execution, the timeline is repopulated and then either play() or reverse() is then fired. When either of those two functions are triggered, the timeline does have tweens to animate... ?

I am working with a timeline in this case as this is an action that is sequenced and makes sense for a timeline. I tried doing it with individual tweens and it became cumbersome very quickly. The codepen I provided is simplified. The actual timeline has 10 different tweens currently (and growing). I do have a state object I am working with. // state let state = { appCurrentState: null, appPreviousState: null, isLeftPaneMobile: false, isLeftPaneOpen: false, isRightPaneOpen: false } I guess that is where I am at. I want to know what is going on logic wise with timelines. At this point, I am just taking shots in the dark. If I knew what was going on with the timelines after clear() and other functions that manipulate timelines, I would know what logic I need to have in place to get where I need to go. What I do know about the working example: - loads and starts with an empty timeline. - loads and starts with a playhead of zero. - onComplete, timeline is populated with tweens. - onComplete, timeline ends with a playhead greater than zero. - onReverseComplete, timeline is emptied. - onReverseComplete, timeline ends with a playhead of zero. I do not believe what I am trying to achieve is so far outside of the box. At time of execution, conditionally, I want to set the children of a timeline. Additionally, the timeline should be able to execute .play() / .reverse() functions without issue. What am I missing to get this to work? Why is it onReverseComplete a clear() is fine but onComplete and onReverseComplete a clear() to each breaks reverse animation?

This first codepen is working, but it only clears the timeline onReverseComplete. I need it to clear every time the function is ran. https://codepen.io/biljohns/pen/OJVXEyN This second codepen has both onComplete and onReverseComplete clears. I am unable to run the animation in reverse (like in the first codepen). https://codepen.io/biljohns/pen/XWbKqWN The reason I am trying to clear upon function execution so I am able to get the correct animation regardless if the user resizes their window. I want to clear and repopulate every time the function is executed. When the timeline is repopulated, the timeline could run either in reverse or forward. I guess I am still foggy as to how timelines work when you begin to manipulate reverse and play in different situations.

Hopefully I can get some help with this timeline clear / reverse issue without a codepen. Functionally, this code works: const desktopMedia = window.matchMedia( "(min-width: 1200px)" ); const timeline = gsap.timeline({ paused: true, onReverseComplete: () => { timeline.clear(); } }); function = () => { if (desktopMedia.matches){ /* desktop */ timeline .set( ... ) .set( ... ) .set( ... ) .addLabel( ... ) .to( ... ) .to( ... ) .to( ... ) .to( ... ) .to( ... ) .to( ... ) .to( ... ); if (condition){ timeline.reverse(); } else { timeline.play(); } } else { /* mobile */ timeline .addLabel( ... ) .to( ... ) .set( ... ) .set( ... ) .set( ... ) .addLabel( ... ) .to( ... ) .to( ... ); if (condition){ timeline.reverse(); } else { timeline.play(); } } } However, since I am only clearing the timeline onReverseComplete, this is no good if the user resizes the window between desktop/mobile. I would like to clear the timeline every time the function is ran and be able to run the new set of timeline tweens either forward or reverse. When I add "onComplete: () => { timeline.clear(); }", it doesn't want to play the reset timeline in reverse. What exactly is going on here?

Resolved. Issue: overuse of timelines (complicated) Solution: usage of both timelines and tweens Final CodePen: https://codepen.io/biljohns/pen/GRJoMBy

New CodePen: https://codepen.io/biljohns/pen/dyoGWRp I got it into a single timeline. It is working as expected outside of the scenario in the original post. I tried a few different things within the resize event listener (no luck - emptied it out). I am still getting hop/bleep/jerk. Question, can I view in the timeline properties somewhere in the console to see exactly what is being recorded and not recorded?

Very well could be the case of over complication. I'll give the single timeline a try.

The values are all good until you resize the window obviously. At the point in my scenario you resize the window, timeline tlReduceLeftPane is in a false reversed() state. Does this make a difference considering time tlReduceContainer set the initial values? Would I need a 3rd timeline to get out of this particular scenario?

Hi Zach, Thanks again for the timely response. By creation of timelines, do you mean timeline declaration or timeline declaration and tweens? I was doing the latter before in my resize event (1st if statement), but found a simple invalidate() did the trick. In my resize 2nd if statement, since both left and right are 50% & 50%, I am trying to grab the parent containers computed width, divide by 2, and set that as the end width on the new fromTo tween that is set on resize.

Hello all, I have been beating my head against the wall on this one for awhile. Working with with invalidate() and clear() to no avail. I am trying to stop a bleep or hop in the animation when it gets to the end. Through a bit of tinkering, it appears the end value you not getting rerecorded? I do hope this is not another css flex issue...? How to reproduce the issue: 1. Click the "toggle container size" button. 2. Click the "toggle leftPane size" button. 3. Resize the window width. 4. Click the "toggle leftPane size" button. Upon clicking the "toggle leftPane size" button, you see a noticeable hop at the end of the animation, why is this? Expected results: User should see no bleep or hop in the animation. My assumption is I need to some how clear the recorded values that are not being overwritten when the window resize event fires. Every time I try to invalidate() or clear() the timeline tlReduceLeftPane, I get unfavorable results. I tried to come up with a solution to reset the values in the resize event (resize listener, 2nd if statement), but that is not working as well.

Hi Jack, Thank you for the speedy response. I see you also moved both panes from 100% > 50%. After further tinkering, I see that was also throwing the animation off. I did some quick reading to fill the flexbox knowledge gap. I know this is a GSAP specific forum, but for clarification... 1. Since there are only 2 flex items in this flex container and flex-grow defaults to 0; set rightPane "flex-grow: 1;" (or any number above 0 - only 2 flex items) so rightPane takes priority and covers the rest of the container when leftPane width changes/shrinks? 2. Since items will never overflow the parent container div (we have a 50/50 split), is it necessary to set leftPane "flex-shrink: 0;"? I ask because it works just fine without setting it but do wonder if there is a reason for setting it in this case that would be beneficial.

Hello all, I am new to GSAP and am trying to understand what goes on under the hood. How to reproduce the issue: 1. Click the "Reduce Container" button. 2. Click the "Toggle LeftPane / Reverse Animation" button. Upon click the "Toggle LeftPane / Reverse Animation" button, you see a noticeable hop in the animation. Why is this? Expected results: After clicking the "Toggle LeftPane / Reverse Animation" button and reducing the left pane down to 200px, reversing the animation should bring the left and right pane split back to a 50/50 (100% width to both panes). Why is this not the case?