Jump to content
Search Community

Moving Objects in JS

2sweedy 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

I am working on a simple Java Script project that has me puzzled.  The project requires getting a star to shoot across the sky. My background is perfect, but that darn star will not move.  I am working with a simple design and have watched many video's on how to do program animations using the draw() function, but although the instructions work for the instructor it is not working for me.

 

Maybe I need a bit more information so I can finish this project and move on to the next with a how-to do this printed on my brain. Can anyone help me? 

Link to comment
Share on other sites

1 hour ago, GreenSock said:

(You are using GSAP for the animation, right?)

 

Let me use my psychic powers. 

 

vUMzpZ1.jpg

 

 

It's unclear if GSAP is being used, but I am seeing p5.js. 

 

That's the only thing I know of that uses a draw() function. We don't get a lot of questions about p5.js, but it's pretty to easy to animate with GSAP. I remember helping somebody with p5.js here.

 

 

 

 

 

  • Like 2
  • Thanks 1
  • Haha 3
Link to comment
Share on other sites

No I have not been using GSAP, as in looking over your website it became clear your all way ahead of me and I found your practice area quite confusing. i have been using the Khanaacademy website for free study, but I can not seem to wrap my brain around this even with the helpful answers I get. I looked at the Codepen, and that to is confusing. I could try copying and pasting my code into the JS script box if that would work.  I think my variable assignment and the use of x = x +1, is what is off in my project. It has been holding me up for two weeks.

 

Will copy 7 paste work or do i need to go to another website to transfer the code over here??

Link to comment
Share on other sites

Quote

Will copy 7 paste work or do i need to go to another website to transfer the code over here??

 

You can post your code here, while editing you will notice there are buttons at the top of editor. 7th button lets you paste code, but avoid posting more than 30-40 lines.

 

 NCX2HJ.jpg

 

You can also use codepen or something else if you prefer, where we can see your code and edit it as well. The link @GreenSock posted shows you step by step guide about how you can use codepen to post your demo.

 

So far it is not clear what your question is about,

1. Are you trying to animate HTML elements like Div etc?

2. Are you using canvas or any library like p5js?

3. Which course or tutorial you are studying using Khan Academy? So we can guess what you are actually trying to do.

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

After two weeks of banging my head on that blank wall of no knowledge I finally regrouped and figured out the problem. As I said the variables is what had not been not done correctly. But during this time I became more creative in my design and the stars were transformed into UFO's, star ships with 3 different layers, and now they move in different directions.

What worked was remembering an earlier project where clouds moved outward to allow the sun to shine through. Thus the use of var rightX & var leftX, and  the code using rightX += 1; and leftX - =1;. By adding the first of these to the code for each star ship I was able to move one to the left and one to the right. Thus completion of this project.  The course i am working on is computer programming in Java Script.  Moving forward math is becoming harder.

As a free member here I will come and read and try using your site for more studies. Thank you for being patient with my lack of sense in trying to understand your helpful suggestions.

  • Like 2
Link to comment
Share on other sites

I wanted to share one of my creations with you and I hope to start practicing here as you have great video's and knowledge that can help me figure out where I am going wrong.  Do I need to download anything to get that code workable screen to come up when I sign in?  Do I need to be a paid member to work on code here?

Anyways follow this link and see the cute animation I was working on.

https://www.khanacademy.org/computer-programming/spin-off-of-project-bye-bye-airplane/5472520275525632

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