Jump to content
GreenSock

DD77

SVG animation

Recommended Posts

Is anything else different?

Link to comment
Share on other sites

yes, the anim = new TimelineMax(); is inside of the if statement 

Link to comment
Share on other sites

Anything else that might be important?

 

?

 

Link to comment
Share on other sites

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

Tried something like this, but didn't work... 

 
else {
        anim.to(targets[this.index], 1, {autoAlpha:0});
      }

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

toggle = this.index; ?
 

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

I would say that but I toggle just one! so I'm not sure to reverse the whole animation...

function reverseAnim() { 
  anim.reverse();
  
}

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

Something liek that? but now sure where to implement it.

onReverseComplete: function () { 
 }

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

I will play a bit more tomorrow.

something like this? 


  $(this).click(function(){
      anim.play();
    
  })

Link to comment
Share on other sites

Ask yourself what prevents a new click/timeline?

 

What did we change so a click would not fire the timeline creation in the doCoolStuff() function? How would you change it back to allow new clicks/timelines?

Link to comment
Share on other sites

I’ll give it a go tomorrow first thing! I’m on my mobile now!

Thanks for your magnificent help! 

Link to comment
Share on other sites

Something like this perhaps? is not stopping though...


function onReverseComplete() {
  anim.play(!anim.reversed());
}

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

I tried something like that, 
if(toggle = "open") { 
    anim.pause();
  }else {
    anim.play();
  }
  

Link to comment
Share on other sites

I ask you, where in this code snippet are you changing the state?

Link to comment
Share on other sites

the if is setting the states  

if (toggle === "closed") {
    toggle = "open";

}

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

 var newAnim = new TimelineLite({paused:true});

Link to comment
Share on other sites

Nope. Why would you want to create a new timeline when the anim timeline has reversed?

 

What value must the toggle variable have in order for a click to create a new timeline?

Link to comment
Share on other sites

it should have a value close right? 

Link to comment
Share on other sites

Yes. So, what do you need to do in order to make that happen after the timeline reverses and the onReverseComplete() function is called?

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