Questions tagged [animation]

For questions related to graphical animations. This includes, but is not limited to sliding, tweening, rotating and resizing of shapes.

Filter by
Sorted by
Tagged with
5
votes
1answer
149 views

Animating a screw made up of elements

I am working on code to generate a screw made up of different elements and animating it by rotatation. The elements are so called conveying elements (denoted by GFA)...
5
votes
2answers
483 views

Simple animation method with requestAnimationFrame code structure

I'm writing a animate method to perform DOM animations. I know there are a lot of libraries out there that already does that (and I use some ideas of them) but I usually prefer writing my own code to ...
5
votes
1answer
501 views

Class(es) for animating objects on a canvas

I'm building a simple canvas animation engine as an exercise in learning ES6. Coming from C++ and Java, I miss static properties, but I've read that "Prototypes having data properties is generally ...
5
votes
1answer
8k views

Bouncing ball in JavaScript

I have been using this code for a while for a project at work. Actually I got it from a friends who got it from a book. But either way it worked for my demonstration. But the other night I decided to ...
5
votes
1answer
244 views

Rendering explosion of bouncing balls on a canvas

I'm making a particle engine that can spawn new explosions while keeping particles from previous ones active (until they despawn). The code works well on its own but within the game, two or more ...
5
votes
1answer
58 views

Drawing a roaming figure in a field, with less flickering

I'm a student to programming. I currently just working a thing where the player can walk around a field of hashtags. so far you can only walk horizontally but before i go any further, i realized that ...
5
votes
2answers
151 views

Simple animation with Javascript and JQuery

I'm learning Javascript and JQuery, and just finished a chapter on JQuery animations.So i decided to give it a try and implement a simple animation on Html document i had. Here is the code: ...
5
votes
1answer
139 views

Animation Template Method for Snake Game

I have recently finished my first iteration of a template method implementation for a JavaScript canvas animation of the snake game. However, I would love for the community to critique this code and ...
5
votes
1answer
189 views

Smoother column resize, page reveal animation

I've been working on this site. The designers original inspiration for the column layout came from this site. I've been trying to get the animation as smooth as possible, to match the smoothness of ...
5
votes
1answer
1k views

Custom marquee consumes a lot of CPU power

I've a code which applies marquee to certain elements by using the requestAnimFrame method. However, when I test my application on a lower spec PC (Intel Celeron 2....
5
votes
1answer
93 views

Sprite is Refreshing

I am using "AndEngine" and I would like to know if I am following the best practice when I want to refresh the entity. Let say, I have 2 sprites and I want change them into 2 another sprites. I ...
5
votes
1answer
159 views

Hoc462 - A Raycaster

For the past week, I've been making a raycaster in JS and if you want a live demo, you can try it here. It ran smoothly before I added variable height walls but now it is very slow (~15 FPS) so I want ...
5
votes
0answers
95 views

Calculate and apply realistic velocities when animating sprites

I am brand new to Scratch (and animation in general) and have been playing around with various techniques I feel will probably come in handy. My project in question can be viewed here. It started as a ...
4
votes
4answers
163 views

Animated scrolling to a place in the same webpage

I'm just beginning web design, and I've come up with this code to scroll to a place in the same page. I don't know if this can or should be improved much longer, so I'm asking for any tips that can ...
4
votes
3answers
217 views

Basic orbiting planets in P5.js

I started studying JavaScript about a week ago and I would like some opinions and advice on my code. This program just creates a canvas and instantiates 5 planets that orbit around a sun, giving them ...
4
votes
2answers
8k views

Python tkinter bouncing ball animation

In the current code, the animation is very unclear, and not "polished" (it doesn't run smooth). Can I make the animation smoother? And/or, why it doesn't run smooth? ...
4
votes
2answers
197 views

Cursor module for a text-editor

A few weeks ago, I had started to write a text-editor in C++ using SFML library. The work is now paused pretty much because I am a lazy freak. So, I thought I might use this passive time to get ...
4
votes
1answer
1k views

D3js: transition from stacked bar chart to bar chart with different datasets

Could I get some advice on the following D3 code that transitions a stacked bar chart into a bar chart with two different datasets? I would like to know how to write cleaner and more efficient code. ...
4
votes
2answers
627 views

JavaScript metaballs optimization

I created this basic metaball visualization in JavaScript. While it does look nice, it is very slow if you increase number of balls and/or make drawing area larger. I think that the performance is so ...
4
votes
2answers
1k views

GameLoop with requestAnimationFrame

I am creating a HTML game where you fight monsters and stuff and this is part of the game loop for dealing damage: ...
4
votes
2answers
153 views

Simple element slider animation tool

I'm new to jQuery and I've been messing about with this code, It works but I want to learn how to shorten the code by the eliminating unnecessary repeated code. Here is a link to JSFiddle HTML <...
4
votes
3answers
387 views

Sprite and AnimatedSprite

I have a Sprite class and an AnimatedSprite subclass, and I'd like to decouple these them and maintain substitutability, ...
4
votes
1answer
53 views

D3 animation explaining base-10 notation

This is my first D3 code. I am self-taught so I am not sure that the chaining of the transition follows the common best practices. Also, is there a way to avoid duplicating the "group" and the "anim" ...
4
votes
2answers
1k views

Animating the percent of a “percentage bar” during the transition

I have created a very basic animated percentage bar with HTML, CSS, and JS the only problem ...
4
votes
3answers
139 views

Switch questions using JavaScript and CSS

I am writing a Q&A wap page and want to switch questions in one page. This is my first time to write JS and CSS code, so I think there must be some improvement. ...
4
votes
1answer
1k views

Animated Score Amounts for Game

This is a simple class for a label with a score that animates counting up or down. When someone in the game scores points, the numbers count up or down to the new total. Here is an example of what ...
4
votes
2answers
6k views

Elevator program code challenge

I recently applied for a job where the company gave me the following prompt for a code challenge. They have since told me "yeah, no thanks" but provided me with no feedback about why they came to that ...
4
votes
2answers
1k views

Is this the correct approach to animation in Java?

I was fiddling with animation in Java and wrote this: ...
4
votes
1answer
635 views

Carousel for website

I have been building my own carousel over the past few days. I am not a jQuery guru, just an enthusiast, and I think my code is a little sloppy, hence the post. Basically what happens is: If someone ...
4
votes
1answer
45 views

Langton's ant in Clojurescript

The weekly coding challenge in Eric Normand's newsletter this week involves implementing Langton's ant. I wanted something on my screen so I put together a simple re-frame app. The core functions ...
4
votes
1answer
51 views

Sierpinski’s Gasket Triangle in JavaScript

I wrote the Sierpinski’s Gasket Triangle in JavaScript, but I feel the code can be better, especially from L32 to L47. Could you make it more organized? ...
4
votes
2answers
171 views

Lorentz Attractor visualization using functional programming

I have been working on this Lorenz Attractor visualization for the past day. I am currently also trying to change my coding style into a more functional programming one. I find it quite hard, to be ...
4
votes
2answers
129 views

JavaScript component to display ephemeral notifications

I would like to improve my code and organization of JS files so I'm wondering if you guys could tell me what I could do better. I've included a small but typical example of how I often use components. ...
4
votes
2answers
497 views

JavaScript animation effect stack

I am building a library that uses animations in a canvas. I need to apply effects to some objects in the canvas and I came up with an effect stack that contains each effect to be executed on a ...
4
votes
2answers
3k views

Animating opacity of 1400 Raphael.js objects hurts animating performance

I am animating 1400 objects trying to create a 'twinkling effect'. As the user moves the mouse faster more hexagon shapes pop into full opacity and have varying fade out rates. The version in the ...
4
votes
1answer
54 views

Event triggers for animations using vanilla ES6

I'm new to JS and wanna know right code style or approach to cod Vanilla JS using ES6. To practice this, I'm using ESLint JS code-style of AirBnb and referencing clean-code-javascript repo. However, I ...
4
votes
1answer
938 views

Sprite animation with SDL2

For the past few days I've been trying to learn how to animate 2D sprites using SDL2. For that purpose, I've taken a 6 frames animation from a Pokémon game and made a PNG image out of it : The way I ...
4
votes
1answer
260 views

CSS3 Dropdown Menu (touch device or mouse compatible)

This may be rather basic, but I wanted to experiment and learn with some of the upcoming CSS3 techniques. I wasn't able to come up with an HTML/CSS only solution, and I had to work longer than I'd ...
4
votes
1answer
2k views

D3.js interpolating line on circumference of circle

For now, I've tried to make a line rotate on the path of a circle, but used setInterval multiple times and there might be other ways of achieving the same. I would ...
4
votes
1answer
107 views

YouTube video intro, and autoscroll when video ends

This code creates an intro video using the Youtube API, screen text written by JavaScript with a typewriter kind of effect. How can I rewrite this as succinct object-oriented code? Also, I'm not sure ...
4
votes
1answer
113 views

Update on tileMap Class

This is an update from An Update on my TileMap Class. It's a tileMap class for a top-down old-school final fantasy game. User @Tim gave me suggestions and I updated ...
4
votes
1answer
103 views

Spritesheet cut to individual frames

I need a hoverable transparent animation for a website, so that it glows when the mouse is over it. I could use two gifs or svgs one on top of another, but (as far as I know) there's no control of the ...
4
votes
1answer
56 views

Analyzing spoke overlaps during rotation: Round 2

Round 1: Analyzing spoke overlaps during rotation I previously posted this question, but I've changed a lot of the code since then. There was a mention of the previous being a bit mixed up, and ...
4
votes
1answer
831 views

JavaFX Smoke Effect (Particle Generator algorithm)

I wrote a "Smoke" effect that I thought I'd post for code review. It's a decorative effect for a puzzle game I'm working on--there will be four of these, animated independently, probably with a ...
4
votes
0answers
51 views

React - pomodoro clock

I'm looking for some feedback on a pomodoro clock that I recently wrote with React. I'm pretty new to React and coding in general. I followed a couple of online courses, but I'm mostly self-taught. ...
4
votes
0answers
38 views

Animation loop for a sliding puzzle game

I'm building a "sliding puzzle" game. This is the animation code for when you click a Tile. This "loop" function is running all the time. When you click a tile, if it's available to move, I set the "...
4
votes
0answers
395 views

Laminar flow in a pipe animation using Tkinter

I wrote this simple particle flow animation with Tkinter. I wanted to ask if there is some major improvements you can think of regarding the animation motor or the documentation of my code? I noticed ...
4
votes
0answers
118 views

Implementing a TTY loading / waiting animation

I implemented a class to animate waiting for processes: ...
4
votes
0answers
946 views

Canvas animation of network nodes and edges

Having to give the idea of an ever changing network of nodes (each with different impact and possibly more than one color) connecting each other to create something. I wanted to give it depth ...
4
votes
0answers
158 views

Cellular automata path and fill algorithm

I have worked for a few days in my cellular automata path algorithm and an easy fill algorithm, but sometimes I get some weird fall in my FPS. If you need a preview ...