Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nate Balcom

Control Image Position?

Recommended Posts

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?

 

image.jpg

See the Pen QEVaRY by nbalcom (@nbalcom) on CodePen

Link to comment
Share on other sites

Hi,

 

Unfortunately, I'm really struggling to understand what is happening and what should happen.

I noticed that your demo is trying to load main.js and it isn't loading. You may need to paste that code into the js panel of the demo.

 

I understand that you may be new to GSAP and JavaScript so I don't mean to be critical or anything, but from the code you provided my guess is that it may be best to build this in an entirely different way. 

 

There is a murky line between us offering support to help others better understanding the core mechanics of GSAP and trouble-shooting errors (both of which we love doing) and building complex interactivity and logic. 

 

I really hope we can find the best way to help you without building a lot from scratch.

 

Can you detail the exact behavior and interactions? are they spinning constantly like a slot machine? Does the user click buttons to make them go up or down? Does the user have to press a button to tell them when to stop?

  • Like 2
Link to comment
Share on other sites

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();
    }
});
Link to comment
Share on other sites

Nate, 

 

You need to include jQuery.  

 

 In Codepen select "settings", "Javascript",  "Quick-Add", then "jQuery".  

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Not sure I can help you all the way through with this.

Regardless of what direction you choose my advice is, Do not make individual timelines for up and down in advance and then try to call them at the right time.

When the user interacts with whatever buttons or keys you have determine what position the each number needs to spin to (may require some conditional logic) and then spin to that location.

 

Again, I don't know how everything is supposed to work but this little demo illustrates that as long as you know that the "3 with the white background" is viewable at y:-110 then all you have to do is tween to that value and it doesn't matter whether you are currently showing the bottom grey 3 or top grey 3.

 

http://codepen.io/GreenSock/pen/GqXLpj?editors=0010

 

Notice how the first and third scroll up but the middle one scrolls down, but they all just tween the image to y:-110

  • Like 2
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

Assuming main-6.js is your file then, yes, it looks good.

 

If you are having problems locally you can visit my CodePen demo, click on the export button, and get a zip that you can extract, study, and run locally. Might help to do a side by side comparison of what is loaded and when.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Well now I have it working locally, but not on  :arrow: 

See the Pen QEVaRY by nbalcom (@nbalcom) on CodePen

. Hah :ugeek:

 

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}
  )}
});
Link to comment
Share on other sites

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");
Link to comment
Share on other sites

Hi I was just working on something that may be closer to what you need.

 

 

TweenLite.set("#strip2 img", {y:-220})


$(window).keydown(function(e){
  //first P
    if (e.keyCode == 80) {
        TweenLite.to("#strip1 img", 0.5, {y:-110})
        //loop 2 and 3
        TweenMax.fromTo("#strip2 img", 0.5, {y:0}, {y:-220, ease:Linear.easeNone, repeat:-1});
        TweenMax.fromTo("#strip3 img", 0.5, {y:0}, {y:-220, ease:Linear.easeNone, repeat:-1});
    }
  //second R
      if (e.keyCode == 82) {
        TweenLite.to("#strip2 img", 0.5, {y:-110})
        //loop 1 and 3
        TweenMax.fromTo("#strip1 img", 0.5, {y:0}, {y:-220, ease:Linear.easeNone, repeat:-1});
        TweenMax.fromTo("#strip3 img", 0.5, {y:0}, {y:-220, ease:Linear.easeNone, repeat:-1});
    }
  //third N
      if (e.keyCode == 78) {
        //loop 1 and 2
        TweenLite.to("#strip3 img", 0.5, {y:-110})
        TweenMax.fromTo("#strip1 img", 0.5, {y:0}, {y:-220, ease:Linear.easeNone, repeat:-1});
        TweenMax.fromTo("#strip2 img", 0.5, {y:0}, {y:-220, ease:Linear.easeNone, repeat:-1});
    }
});

 

 

demo: http://codepen.io/GreenSock/pen/RRZRWv?editors=0010

 

All that code could be consolidated quite a bit but I think it might help to see it the long way.

This is a pretty ambitious undertaking for a beginner project, and there is only so much time we can dedicate to helping with the js basics and logic issues.

Don't get discouraged, it just takes some time and practice for all of it to click. 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 - 

See the Pen GqYjNj by nbalcom (@nbalcom) on CodePen

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