How do I reset my animation

[mic1991]

Hello all,

 

This is my first post here or on any forum like this, I'm really sorry if I've missed a previous post about this but I am really new to GSAP and JS i general.

 

My linekd Codepen includes an animation that starts on page load. When 'Button 1' is clicked, the animation pauses, then changes (the blue ball travels further right/left.

 

What I want is, when 'Reset' is clicked, the animation to return to its original state. What am I doing wrong?

 

All the best and thank you in advance.

 

Michael

See the Pen wXzjgg by michael19911991 (@michael19911991) on CodePen

[GreenSock]

First of all, welcome to the forums, @mic1991!

 

I think the problem has to do with variable scope. When you create a variable with the "var" keyword inside a function, it ONLY exists inside that function. Nothing outside of that function can see it (that's just a JavaScript thing...well, most languages...I just mean it has nothing to do with GSAP).

 

This happened with your click_tl variable. 

 

So...

function test() {
    var tl = new TimelineLite();
    // ...
}
test();
console.log(tl); //undefined! "tl" was created inside the test() function as a local variable. 

If you need to reference that variable elsewhere, you should declare it in the parent scope (not inside the function), like:

var tl;
function test() {
    tl = new TimelineLite();
    //...
}
test();
console.log(tl); //works!

 

Does that help? If you declare your click_tl variable at the top of the document (not in the function), I believe you'll get what you were looking for. (unless I misunderstood your goal)

[mic1991]

Hi,

Thank you for the quick reply!

 

I can now stop the timeline when I click reset BUT:

 

1) I can't get the original 'tl' timeline to restart

2) An arrow and red line appear when you click 'Button 1' and if I click reset before they naturally disappear, they stay on the screen, these are part of 'click_tl'

 

Do I need to 'restart' click_tl before I pause it, to remove those elements? and for 1), I've tried tl.progress(0, true) but no dice.

 

See the Pen wXzjgg?editors=0010 by michael19911991 (@michael19911991) on CodePen

 

[mikel]

 

Hi @mic1991,

Welcome to the GreenSock Forum.

 

Is not easy to understand what the process should be.

My tip ... take a look at this page: writing-smarter-animation-code

 

Just a little starter:

 

See the Pen aKaVXo by mikeK (@mikeK) on CodePen

 

Happy tweening

Mikel

[GreenSock]

Yeah, I'm having a really tough time understanding exactly what you want to have happen and why your code is structured the way that it is (I'm not criticizing - I'm just unclear). 

 

It looks like you're creating a "tl" timeline that handles the oscillation, but then you pause that and have a endFrameAnimation() function basically recreating the same type of movement that takes over, but then you're trying to control "tl" (the one that got paused and whose movement got hijacked by the endFrameAnimation()). And you still had that error from before regarding where you declare your variable. 

 

I have no idea if this is the effect you're looking for: 

See the Pen 1c9303462d0dcf9fdd1c8375c3243a56 by GreenSock (@GreenSock) on CodePen

 

And I'd definitely echo @mikel's recommendation to read that CSS-Tricks article. I suspect you could create the effect you're after with a lot less code (but again, I don't quite know what you're trying to do, so I could be wrong). 

 

[mic1991]

Hi guys,

You know what, I barely understood this when my colleague explained it to me so God knows how I expected anyone else to  understand what this animation is supposed to show right off the bat. Sorry I'll try and explain!

 

I actually paid someone on Codementor to build this with me. I was originally using CSS @keyframes but Greensock seemed a better option. Because of this, I still only 50% understand the code on here, as I'll be honest, I didn't know exactly what my mentor was doing, as he worked through this animation. I'm really not offay with javascript but am trying to get my head around it. I've been using Codecademy but none of it seems similar to this haha

 

So the animation demonstrates the difference in molecular bond vibrations according to changes in energy levels interacting with them. In this case, infrared light waves. We make infrared spectroscopy accessories where I work, so this is a diagram to demonstrate some of the theories involved in what we do. So after Button 1 is clicked:

• a light wave comes in

• the ball pauses to allow the arrow to extend (showing an increase in energy)

• the ball moves further left and right, actually from the start-to-end of that next white line above the arrow, to show a more vigorous molecular vibration

 

@mikel thanks for your link I'm going to read through that and do my best to adopt a smarter way to organise timelines, etc. That's a cool Star Wars animation by the way!

 

@Greensock you've actually given me almost exactly what I needed to achieve! After pressing "Button 1" the blue balll (and the spring it's 'connected' to) need to go further left and right, meeting the ends of the white line above the arrow. I also need to figure out a way to allow the "Button 1" to work again after Reset is clicked.

 

Do you think it'd be better to try and start this from scratch, or are there things I can easily to do save this animation?

 

 

[Dipscom]

Ohhhh Science!

 

I likes science!

 

If you're not on a horrendous deadline I'd be happy to help you work your way around what you need to do to accomplish this if you'd want to. No strings attached, just for the fun of it. The only caveat is that it would be on a drip-drip basis as I'm still a bit overwhelmed with other stuff that needs doing.

 

Ping me a private message if you fancy.

 

 

[mic1991]

Thank you science! Yes please, I'd appreciate that a lot. I'll PM you!

[mic1991]

Just want to say I'm really touched how helpful you guys are on this forum. Cheers! ?

[Dipscom]

3 hours ago, mic1991 said:

I actually paid someone on Codementor to build this with me. I was originally using CSS @keyframes but Greensock seemed a better option.

 

I forgot to do the hard sale on this line.

 

Yeh man, GSAP is da bomb. Is a better option for a better world! It's performant, efficient, clean, renewable and GREEN - therefore recyclable!

 

The world should be using more GSAP, we all need to support all GREEN and renewable initiatives in the world.