Jump to content
Search Community

Timeline recreation / clear issue

biljohns test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

This first codepen is working, but it only clears the timeline onReverseComplete. I need it to clear every time the function is ran.

See the Pen OJVXEyN by biljohns (@biljohns) on CodePen

 

This second codepen has both onComplete and onReverseComplete clears. I am unable to run the animation in reverse (like in the first codepen).

See the Pen XWbKqWN by biljohns (@biljohns) on CodePen

 

 

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. 

Link to comment
Share on other sites

I think you're just trying to use timelines too much :) Appending to a timeline, clearing things, and stuff like that make the logic convoluted. I'd be very tempted to use just a regular tween or two unless you had good reason to use a timeline. I definitely would try to avoid appending to the same timeline every time. 

 

I recommend creating a state diagram for this sort of thing. It will make the logic much more straightforward. Then you just have to write the same logic into code which is easy if you do it in a straightforward way. Here's some aid:

  1. If screen size above threshold:
    1. If in state 1 (left pane) and toggle container size clicked => animate to state 2 (split equally between left and right pane). 
    2. If in state 2 (left pane) and toggle container size clicked => animate to state 1.
    3. If in state 2 and toggle leftPane size clicked => animate to state 3 (shrink left pane, expand right pane). 
    4. If in state 3 and toggle leftPane size clicked => animate to state 2.
  2. If screen size below threshold:
    1. Do what you want here. Not sure as you haven't explained it yet. 

It might even be helpful to have an object that is just keeping track of the current state, i.e. let state = 1; and then changing the number when you go from state to state. That way when you go below the threshold you know what state it's supposed to be in and can start in the appropriate state for the mobile stuff. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

If you clear the timeline then there's nothing to reverse :) 

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... ?

Link to comment
Share on other sites

8 minutes ago, biljohns said:

When either of those two functions are triggered, the timeline does have tweens to animate... ?

At that point it will look at the current value and try to animate it to the value specified. But if the value is already at 100vw then it won't have anywhere to animate to. So you would need to change your tween to go the other direction (to 200vw or whatever). 

 

Another option is to have a .reset() function that you use to set a state's values (like the width). Then when you clear the timeline you reset it and then create your tweens again.

 

But this all seems so convoluted - just keep track of the state and use tweens :) 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi @biljohns

 

I've read every single post you've made, and I'm still confused by what you are even trying to do. Can you explain what is your end goal.

 

Are you trying to do something like in this demo? Click on the "more" and "home" links. 

 

See the Pen ZbPxjN by osublake (@osublake) on CodePen

 

That's from this thread...

 

But again, I'm still unsure about what you are trying to do. If you could point to a demo or video of something related, that might be helpful.

 

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

@ 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.

Link to comment
Share on other sites

@ 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.

Link to comment
Share on other sites

12 minutes ago, biljohns said:

With that timeline in your example, based on state, you just keep adding tweens to the same timeline every time state is changed?

 

No. Everytime animateToState is called, it creates a new timeline with new tweens, so there is no chain of animations being queued.

 

So does his demo do what you are looking for?

 

  • Like 1
Link to comment
Share on other sites

6 minutes ago, OSUblake said:

 

No. Everytime animateToState is called, it creates a new timeline with new tweens, so there is no chain of animations being queued.

 

So does his demo do what you are looking for?

 

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.

Link to comment
Share on other sites

Oh, I see.

 

He didn't technically overwrite them. If the previous animation lasted longer than the new animation, it might look a little funky like here. Notice how the box goes left, then right, and then left at the very end. That is because both tweens are running at the same time.

 

See the Pen 0fe81acc740a083c2ddd79564e193d03 by osublake (@osublake) on CodePen

 

You can fix that by setting overwrite to "auto" or true.

 

See the Pen 68b5c9b50e61179474629f74f680c605 by osublake (@osublake) on CodePen

 

Or kill the first animation.

 

See the Pen e02f232f003a8e2fc26b27a31003bd2f by osublake (@osublake) on CodePen

 

 

The same technique would work for timelines. Tweens and timelines are interchangeable for the most part. 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...