Jump to content
Search Community

SVG animation

DD77 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

okay, so now we only get a new timeline if the toggle variable is "closed". However, nothing has changed from the original demo because the value of that variable is still "closed". We can still click all three buttons and a new timeline is created. We need to add something to that logic when we click a button to change the value of the toggle variable.

 

function doCoolStuff() {
  if (toggle === "closed") {
    // what can we add here to prevent additional timelines?
    anim = new TimelineMax();
    anim.to(targets[this.index], 1, { y: -50 });
  }
}

 

See the Pen GYbYjR by PointC (@PointC) on CodePen

 

  • Like 1
Link to comment
Share on other sites

We don't really need an else in this situation. We want to prevent additional clicks/timelines once we have an active timeline, right? If the toggle variable is not "closed" nothing will fire, right? So we need to change that variable. I'll give you another hint.

 

function doCoolStuff() {
  if (toggle === "closed") {
    // what can we add here to prevent additional timelines?
    toggle =   // we need to assign a new value to toggle
    anim = new TimelineMax();
    anim.to(targets[this.index], 1, { y: -50 });
  }
}

 

I'd also note there are dozens of ways to make all this happen. I'm trying to lead you down one specific path towards an easy solution because you said you were completely lost. Once we have this done, you should be able to modify it any way you like. This is step 2. There are only 4 steps to a working demo.

  • Like 2
Link to comment
Share on other sites

That does "technically" work because we are assigning a new value that isn't "closed", but I was looking for:

 

function doCoolStuff() {
  if (toggle === "closed") {
    toggle = "open";
    anim = new TimelineMax();
    anim.to(targets[this.index], 1, { y: -50 });
  }
}

 

Again, I'm using open/closed because your image covers are either open or closed.

 

Okay, we can now click to create a timeline called anim and additional clicks are ignored. We're halfway there.

 

See the Pen EdBzOG by PointC (@PointC) on CodePen

 

Now, I already have a listener on the back button that calls the reverseAnim function. We need to add some code there that will reverse the anim timeline.

 

function reverseAnim() {
 // how can we reverse the anim timeline?
}

 

  • Like 2
Link to comment
Share on other sites

Yes - that's exactly right. We only have one active timeline so this works perfectly. We can now click any of the buttons and create a timeline and the back button will reverse it.

 

See the Pen GYbbxM by PointC (@PointC) on CodePen

Now, the final problem is this only works once. Why? Because after we create a timeline, the toggle variable is open. Even after we reverse the timeline, the toggle variable is still open. Can you think of a way to fix that?

 

Hint: timelines have an onReverseComplete callback.

 

Link to comment
Share on other sites

You would put that in the timeline vars object.

 

For now, lets just put that in a separate function. 

 

anim = new TimelineMax({ onReverseComplete: onReverseComplete });

 

Now, in that function, how can we allow new clicks/timelines?

 

function onReverseComplete() {
   // how can we allow new clicks/timelines?
}

 

See the Pen oarKLG by PointC (@PointC) on CodePen

 

  • Like 1
Link to comment
Share on other sites

If it's not stopping that's not the path you should be going down.

 

You are trying to overcomplicate this. The answer is much simpler and has nothing to do with the actual timeline, it's the concept of state.

 

Your animation has two states, doesn't it? One is open the other is closed.

 

Now, refer back to what PointC has explained and the code that is there as an example. What do you need to write in your onReverseComplete function so that your state changes? What in the doCoolStuff() function prevents the timeline to be created repeatedly?

  • Like 2
Link to comment
Share on other sites

There's no if needed. We know the state of the toggle. We know the timeline has reversed. (this is an onReverseComplete callback) 

 

We now need to tell the function that it's okay to build a new timeline if we click a button. What condition must be true in order for that to happen? It's one line of code. 

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