Repeating Animations

how can i make a repeating animation like a question mark box in super mario world?

Is this going to live in the DOM (like in a div element, button, etc.)? Or will this animation be living in a canvas?

i think you’re talking about html, but i’m talking about javascript

Not quite. Where your animation will be represented changes what techniques you have to work with. This article talks about the differences between both worlds:

i looked at the video, but i still don’t understand, i still don’t understand why i should use DOM or canvas in certain situations

If you need to control every pixel perfectly and will be dealing with a lot of visuals for things like games, visualizations, charts, etc., then go with the canvas.

If you are looking for a more traditional web page/app experience where you’ll have a lot of text, images, etc. then the DOM is your best bet. The DOM also makes it easy for you to use HTML/CSS/JS and 3rd party frameworks.

all my program is doing is drawing a ton of rectangles at once, so maybe DOM

Based on what you just said, Canvas seems like a good option. How many rectangles are you thinking? Will these rectangles be purely visual, or will users interact with them like clicking on them?

hundreds of rectangles, they will be slightly interactive where if you press the left or arrow most of them change

I would suggest going with the canvas. Before you go too far, how familiar are you with working in the DOM and working with visuals on the canvas? There is a learning curve for both, so I want to ensure you are fully aware of what you are going into :stuck_out_tongue:

For learning about the Canvas, I have a series of articles here: Working with the Canvas

For the DOM, these articles are part of the larger JavaScript series:

i’m only 1 year into javascript, so i know none of this at all.

Nice! The first year is always the challenge. In that case, my best suggestion would be to first go through the topics I linked earlier and get a deeper understanding of the concepts.

How would I know I’m using canvas mode or DOM mode?

Oh, you’ll know :stuck_out_tongue:

If you have a canvas element defined and you are exclusively writing JavaScript to draw shapes and other related things inside it, you’ll know you are in the canvas mode.

Again, the tutorials I linked to earlier will help.

im using canvas mode

Ok. And your question is: How to create a looping question mark animation like in Super Mario?

Do you have a link to your page that you can share? I’d like to know where you’d like to have that box and animation appear.

Kirupa :slight_smile:

in a second, i have to make the box

For repeating animation , watch this out!

how can i use this in javascript, and have not an instant transition