Nate Balcom

Jack you guys here at Greensock are way awesome. That's exactly what I was looking for. Thanks for providing code to a nube. I have a lot of projects coming up that I'll be utilizing GSAP for. I'm staring to wrap my head around the syntax.Thanks so much Jack. Finished product

I was able to create a barrel roll animation with help from Carl, but now need to add a little bit more interactivity to my current menu. I currently have a car gear system that animates in barrel roll fashion that works by pressing the numbers 1-4 on your keyboard. It works how it's supposed to when it's ascending, but not descending. When you shift from anything left of drive the numbers need to barrel roll up. I'm thinking this is a job for TimeLineLite, but am a nube when it comes to formatting this code. Does anyone have advice how I should proceed or a link to some code I can look at possibly?

I made it repeat the animation then stop in the correct position. I'm pretty close now. I just need it to gradually slow the spin down to a stop. I tried delay and "-=1.25" which are not quite what I need. I started another pen - http://codepen.io/nbalcom/pen/GqYjNj

Man Carl you sure do rock. Thanks for all your help. I think this is what I'm looking for. I don't tend to do anything the easy way. Being a nube I just needed some code to reverse engineer. I can see my studio using GSAP on a lot of future projects. I'm looking forward to getting more into it. In another life I was a Flash Programmer so a lot of this is familiar. Again I appreciate your help.

I understand the logic, but not the syntax. I'm trying trigger all rolls on key press. I don't know how it's written. Is there a good resource I can reference? I'm not sure how to write this. TweenLite.set("img", {y:0}) $(window).keydown(function(e){ //Park #1 ↑ if (e.keyCode == 49) {TweenLite.to("#pgear img", 0.3, {y:-75})} //Reverse #2 ↑ if (e.keyCode == 50) {TweenLite.to("#rgear img", 0.3, {y:-75})} //Neutral #3 ↑ if (e.keyCode == 51) {TweenLite.to("#ngear img", 0.3, {y:-75})} //Drive #4 ↑ if (e.keyCode == 52) {TweenLite.to("#dgear img", 0.3, {y:-75})} //Park #5 ↓ if (e.keyCode == 53) {TweenLite.to("#pgear img", 0.3, {y:-2})} //Reverse #6 ↓ if (e.keyCode == 54) {TweenLite.to("#rgear img", 0.3, {y:-2})} //Neutral #7 ↓ if (e.keyCode == 55) {TweenLite.to("#ngear img", 0.3, {y:-2})} //Drive #8 ↓ if (e.keyCode == 56) {TweenLite.to("#dgear img", 0.3, {y:-2})} }); var tl = new TimelineLite({paused:true}); tl .to(e.keyCode == 49, {y:-75}, "park") .to(e.keyCode == 50 {y:-75}, "reverse") .to(e.keyCode == 51, {y:-75}, "neutral") .to(e.keyCode == 52, {y:-75}, "drive") .to(e.keyCode == 53, {y:-2}, "parkroll") .to(e.keyCode == 54, {y:-2}, "reverseroll") .to(e.keyCode == 55, {y:-2}, "neutralroll") .to(e.keyCode == 56, {y:-2}, "driveroll") // then on the click/key events function eventHandler(label, direction){ switch (direction) { case "forward": tl.play(label); // plays the timeline from the specific label break; case "back": tl.reverse(label); // reverses the timeline from the specific label } } // then calling the function eventHandler(forward, "park"); eventHandler(forward, "reverse"); eventHandler(forward, "neutral"); eventHandler(forward, "drive"); eventHandler(forward, "parkroll"); eventHandler(forward, "reverseroll"); eventHandler(forward, "neutralroll"); eventHandler(forward, "driveroll");

Well now I have it working locally, but not on Codepen. Hah I think I have to work on my if statement. I need all the images to cycle and spin like a slot machine on press leaving the gear shifted into at the white letter state. This sounds like a job for TimeLineLite as it follows the order the script is written in. I'm just not sure how to write it. Does anyone have a resource I can look at? I guess I'm trying to do something like the following code. Not the following code as it's wrong, but I think it best illustrates my nube point. So below if you press #1 it shifts into park while also firing the other 3 animations like a slot machine. When you press 2 it shifts you into reverse and fires animations 1,3 & 4. Consequently, when you press #3 it shifts you into neutral and fires animations 1,2 & 4 and so on and so on. TweenLite.set("img", {y:0}) $(window).keydown(function(e){ //Park if (e.keyCode == 49) {TweenLite.to("#strip1 img", 0.3, {y:-75} {TweenLite.to("#strip2 img", 0.3, {y:-2} {TweenLite.to("#strip3 img", 0.3, {y:-2} {TweenLite.to("#strip4 img", 0.3, {y:-2} )} //Reverse if (e.keyCode == 50) {TweenLite.to("#strip2 img", 0.3, {y:-75} {TweenLite.to("#strip1 img", 0.3, {y:-2} {TweenLite.to("#strip3 img", 0.3, {y:-2} {TweenLite.to("#strip4 img", 0.3, {y:-2} )} //Neutral if (e.keyCode == 51) {TweenLite.to("#strip3 img", 0.3, {y:-75} {TweenLite.to("#strip1 img", 0.3, {y:-2} {TweenLite.to("#strip2 img", 0.3, {y:-2} {TweenLite.to("#strip4 img", 0.3, {y:-2} )} //Drive if (e.keyCode == 52) {TweenLite.to("#strip4 img", 0.3, {y:-75} {TweenLite.to("#strip1 img", 0.3, {y:-2} {TweenLite.to("#strip2 img", 0.3, {y:-2} {TweenLite.to("#strip3 img", 0.3, {y:-2} )} });

It looks like the only thing I had different was I was linking to jquery-3.1.0.js and this is linked to jquery-2.2.4.min.js. Is there an issue with the new version of jquery? It's working locally now. You rock Carl. Thanks sir.

Sweet that's what I was looking for. I haven't gotten anything working locally yet, but am a step closer. Am I not linking to something I need? This is the list of .js files I'm linking to. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="js/main-6.js"></script> <script src="js/jquery-3.1.0.js"></script>

I got it working on codepen, but not locally. I downloaded and linked to the newest version of jquery. Am I missing a step?

Hi Carl. I love your videos. What I'm trying to do is create a slot machine type effect only for a car style interface. Park, Reverse, Neutral and Drive. These are to be activated on key press. When keys are clicked I want the barrel roll to spin all of the buttons and land on the white number area for the selected gear. Does that make sense? Sorry I'm having a hard time explaining this and yes you are right I am very new to GSAP. I just started using it yesterday. I love the possibilities. I'm trying to create 2 animations for each button first. One of the buttons animating up and one down. I have the basic css working, but it doesn't have the functionality I require. It just has mouse rollover states. Here's the code I started with originally before I discovered GSAP. -> http://jsfiddle.net/natebalcom/3v19yfm2/ I'm working with the code below from user RyanF which makes sense to me, but isn't working yet. Maybe the syntax is incorrect? I'm not sure. $(window).keydown(function(e){ //P if (e.keyCode == 80) {tl1.reverse(); } //R if (e.keyCode == 82) {tl2.play(); } //N if (e.keyCode == 78) {tl3.play(); } //D if (e.keyCode == 68) {tl4.play(); } });

I'm working on a barrel roll effect and needed some advice about how to place images. I have a series of images that have 3 states for either scrolling up or down. When active I want the image to stop in the middle on the white number. Is there a way I can tell my animation to stop at a certain spot on my graphic?

Hmm. I gave this a try, but it just makes my graphics disappear. When I removed the spaces/ cleanup code from the script it worked like it did before, but the arrow buttons didn't work. I added a few lines here, but still no go. $(window).keydown(function(e){ //P if (e.keyCode == 80) {park.reverse(); } //R if (e.keyCode == 82) {park.play(); } //N if (e.keyCode == 78) {park.play(); } //D if (e.keyCode == 68) {park.play(); } });

I have an animation I'm working on that has 4 elements. Each element on key press needs to animate. I can't figure out the logic to make this happen. I've been able to create my first animation, but am stuck on how to set multiple animations. Also, once I have all my animations working how do I call them on an on key press event? I want to do something very close to this. Here's my animation code. // First Frame Animations var park = new TimelineLite(); park.from(".park", 0.3, {top: -201}) .from(".reverse", 0.3, {top:-201}, "-=0.20") .from(".neutral", 0.3, {top:-201}, "-=0.20") .from(".drive", 0.3, {top:-201}, "-=0.20"); // Second Frame Animations var reverse = new TimelineLite(); reverse .from(".reverse", 0.3, {bottom: 100}) .from(".reverse", 0.3, {bottom: -100}, "-=0.20") .from(".neutral", 0.3, {bottom: 100}, "-=0.20") .from(".drive", 0.3, {bottom: 100}, "-=0.20"); // Third Frame Animations var neutral = new TimelineLite(); neutral .from(".reverse", 0.3, {bottom: 100}) .from(".reverse", 0.3, {bottom: -100}, "-=0.20") .from(".neutral", 0.3, {bottom: 100}, "-=0.20") .from(".drive", 0.3, {bottom: 100}, "-=0.20") // Fourth Frame Animations var drive = new TimelineLite(); drive .from(".reverse", 0.3, {bottom: 100}) .from(".reverse", 0.3, {bottom: -100}, "-=0.20") .from(".neutral", 0.3, {bottom: 100}, "-=0.20") .from(".drive", 0.3, {bottom: 100}, "-=0.20") I also added a graphic if it helps. Little help anyone?

I feel like I'm getting closer, but am not sure how to get past the first animation. It's doing what I want it to, but the 3 that follow don't trigger. Also I'm not sure how to trigger these by key press. Anyone? // First Frame Animations var park = new TimelineLite(); park.from(".park", 0.3, {top: -201}) .from(".reverse", 0.3, {top:-201}, "-=0.20") .from(".neutral", 0.3, {top:-201}, "-=0.20") .from(".drive", 0.3, {top:-201}, "-=0.20"); // Second Frame Animations var reverse = new TimelineLite(); reverse .from(".reverse", 0.3, {bottom: 100}) .from(".reverse", 0.3, {bottom: -100}, "-=0.20") .from(".neutral", 0.3, {bottom: 100}, "-=0.20") .from(".drive", 0.3, {bottom: 100}, "-=0.20"); // Third Frame Animations var neutral = new TimelineLite(); neutral .from(".reverse", 0.3, {bottom: 100}) .from(".reverse", 0.3, {bottom: -100}, "-=0.20") .from(".neutral", 0.3, {bottom: 100}, "-=0.20") .from(".drive", 0.3, {bottom: 100}, "-=0.20") // Fourth Frame Animations var drive = new TimelineLite(); drive .from(".reverse", 0.3, {bottom: 100}) .from(".reverse", 0.3, {bottom: -100}, "-=0.20") .from(".neutral", 0.3, {bottom: 100}, "-=0.20") .from(".drive", 0.3, {bottom: 100}, "-=0.20")

I want to do something very similar to this. I'm working a project that has 4 rollover images side by side. I need to animate multiple rollover states depending on key press. I included a graphic to help better explain what I'm talking about. If 1 is clicked 2,3 & 4 should roll down. If 4 is clicked 3,2 & 1 should roll up. If 2 is clicked 3 & 4 should roll down etc, etc. BTW I'm sorry if this sounds confusing.