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?