Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [animation]

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

2
votes
2answers
71 views

Looping text with directional control

The code is an implementation of looping text (similar to a circular buffer - wraps around when it reaches the edge of the defined bounds) with directional control. The code is functional and works ...
2
votes
1answer
31 views

Looping text in Python with directional control

The code is an implementation of looping text (similar to a circular buffer - wraps around when it reaches the edge of the defined bounds) with directional control. The code is functional and works ...
0
votes
0answers
22 views

Smoother animation with linkprop in matlab figure

So I gone through my code and truncated it as much as possible to get to the meat of the problem. My code contains GUI functions and variables to allow for easy building of the animations. As my main ...
5
votes
1answer
141 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)...
3
votes
1answer
73 views

TypeWriter Javascript effect

I have implemented a Javascript TypeWriter effect for my website. It types out code using the TypeWriter variable by adding each character on and setting a timeout. It then 'deletes' code using text ...
1
vote
1answer
52 views

Continuously update position of div with click event

I am trying to continuously get the position of a div on screen and update the new position each time a "click" event listener is clicked. At the moment my code works but feels redundant and could be ...
1
vote
0answers
23 views

Looping over an array with requestAnimationFrame

Over on SO I posted a question: Change transition duration during loop with requestAnimationFrame which hasn't got any responses just yet. I've since come up with this idea and wanted to know if there ...
1
vote
1answer
32 views

Creating smooth animations using rAF

It is my first time trying to create smooth animations using rAF and I would like some insight from more experienced developers. Basically I have 16 elements with x,y coordinates and on mousemove over ...
3
votes
2answers
63 views

Changing the width of a centered progress bar

I am making a game in which the player has a certain amount of available boost. To show this, I am using a blue bar inside a black frame. The bar can grow and shrink at different rates as available ...
3
votes
1answer
59 views

JavaScript flipping clock

Here are two simple classes - Digit class maintains digit behaviour - primarily flipping animations, and Clock class handles everything that is related to time data. I'm going to use this code for ...
3
votes
1answer
55 views

JavaScript code to add buttons and slowly remove them

My javascript code is working, however i am seeking suggestions on how I can go about improving my existing code for reusability and testability. The code is pretty straight forward, I have three ...
3
votes
0answers
283 views

React native circular progress view

This is a functional component that I have developed in React Native for creating a circular progress view. The code does not use any external libraries, just pure CSS. Article that I wrote while ...
1
vote
0answers
24 views

Cleanly preventing flashing an element from corrupting future flashes

For a Seesaw (Swing) app I'm writing, I need to be able to flash a component for a certain duration. Here's the basic function I came up with that accomplishes this: ...
11
votes
4answers
1k views

Countdown control with arc animation

I've implemented countdown timer control with arc animation that looks like this Implementation notes: For arc visualization I've created class Arc derived from <...
1
vote
0answers
196 views

React Animation example - accordion panel

I decided to study an animation in React and created a simple example of an collapsible panel using CSSTransitionGroup. To make an animated collapsible, I added max-height: 0, overflow: hidden and a ...
2
votes
1answer
59 views

CSS/JS slider using just data-attributes and transform:translate

I needed to make a multi-page form, with slides, but without using too much js code like slick.js or the likes. So I tried to figure out how to make it really simple, but still cross-browser and ...
7
votes
1answer
221 views

Time delay indication bar for a text game

For a game I am writing in Python 3.6.5, I made a text-based animation to indicate the passage of time (when chopping a tree or mining a rock, etc). I did a lot of trial and error to get the output ...
2
votes
0answers
43 views

Iterate through images really fast with JS

My objective is to modify the JavaScript code to get the single image on the page to iterate through images faster. It should be possible to get the images to load in about 10 seconds(about 3 seconds ...
-2
votes
1answer
79 views

jquery navigation plug-in to show content [closed]

I'm somewhat new to JavaScript / jQuery. I wrote this "plug-in", and it seems to do what I want. But I know what I've done is a bit clunky and inelegant. The idea is that I have multiple columns of ...
2
votes
1answer
48 views

A simple program that animates the Y position of multiple elements based on the window scroll position

The following code animates an item's Y position based on how much of its parent is currently visible. This is the first time I ever animated something on JavaScript based on the window scroll ...
4
votes
0answers
39 views

Tweaking this Pong Game to embed a smarter AI

I am new to game development and took on the task to create a Pong replica due to my curiosity and interest in the field. I decided to write it in JavaScript because the game is not too labor ...
1
vote
0answers
423 views

jQuery animate() and css() not performing well in firefox and internet explorer

I am making a webapp that needs a division to expand on click. (The division is loaded with content, so it was likely to not animate very well, but I increased the animation time to 1s to make it look ...
3
votes
1answer
76 views

Ring Timer Animation with Chasing Tail using CoreAnimation

After a fair amount of trial and error, I have gotten the animation acting in the manner that I want it, as seen here. However, I always feel like I'm writing way too much and too sloppily when trying ...
0
votes
0answers
18 views

Leaves in the wind animation with requestAnimationFrame

I am creating a leaves-in-the-wind effect in this pen and have been encountering performance issues, i.e. buggy frame rates every now and then on a relatively modern machine. Seeing as performance is ...
1
vote
1answer
58 views

Using GreenSock's autoAlpha property to show and hide images on hover [closed]

I have six tiles that I am animating on hover. The tiles invert from light to dark on mouseover and back to light on mouseout. My goal is for the inversion of the tile happen seemlessly and smoothly....
1
vote
1answer
27 views

Javascript plugin: scrolling based animations

I worked in a Javascript plugin the last couple of days, to implement scrolling based animations in websites. It's functional at the moment (here is the project page with a small demo). The code is a ...
0
votes
1answer
46 views

Making an image slideshow

I wrote a function to make a image slideshow in javascript using for() loop, setTimeout() and ...
4
votes
2answers
150 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
1answer
50 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" ...
0
votes
1answer
43 views

React + jQuery Tab Scroller

A simple tab scroller built with React.js that utilizes jQuery for the animation. Questions I've only just started learning React and I've recently come across ...
14
votes
2answers
393 views

Counting people inside the house game

This program animates people going inside and outside of a house, the user has to keep a running sum in their head and must give the answer at the end. The speed of people, the number of maximum ...
2
votes
1answer
701 views

Animate a box, bouncing left and right

I wrote the following code for move a box to right and return it to left, and repeat this action forever. This code works, but is there a better solution? ...
1
vote
1answer
2k views

jQuery vertical div slider

In my project I need to do an automatic sliding vertical slider: ...
0
votes
0answers
99 views

Abstract water ripple animation on an HTML canvas

I am curious to know whether this is the most basic and best way I could be coding this animation on my website object thats a lone tree on an island when you click on it a nice animation plays HERE. ...
0
votes
1answer
104 views

Typewriter animation, implemented using recursive asynchronous function [closed]

In this animation, I am wondering if it's a good idea using async/await with recursive calls and the effect may be caused to the javascript event loop. Core function: ...
8
votes
1answer
121 views

Animation of linear transformations

Coordinates Given a 2d space, we can fix a coordinate system to talk about transformations numerically. The red vector, that ends at (1, 0) and the green vector that ends at (0, 1) are called the ...
0
votes
0answers
930 views

Slideshow with Angular, Typescript, Angular Animations

I'm looking for feedback on my Slideshow / intro reel made with Angular and Typescript. As I developed it I ended up using a lot of Typescript and a small bit of Data binding on the HTML. I also used ...
4
votes
1answer
727 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. ...
3
votes
1answer
422 views

Analog clock in React.js, rendered using CSS rotation

I am new to ReactJS and I am trying to write a component which emulates an analog clock. The second, minutes and hour div elements are transformed every second using an interval function. However, I ...
1
vote
0answers
17 views

Floating Input Label with GreenSock

I created floating input labels, however, I don't think the way I wrote the code is the best way and seems redundant. For example I'm targeting the same elements more than once in different functions ...
0
votes
1answer
45 views

How to run canvas animation without effecting other javascript code [closed]

It seems to be the case that the canvas animation affects other JavaScript functions when I use window.onload = function() {. Please let me know the best practice ...
4
votes
0answers
247 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 ...
2
votes
1answer
68 views

jQuery expansion menu

I have a menu done in jQuery that I'd like some feedback on: ...
4
votes
0answers
74 views

Implementing a TTY loading / waiting animation

I implemented a class to animate waiting for processes: ...
3
votes
0answers
96 views

CSS animation of ravens flying in a circle

I just made a little experiment on codepen with this animation. But I get some performance issues: sometimes it's not as smooth as it should be. Does someone know some practice I could use to ...
3
votes
1answer
290 views

Rain effect with SFML

I decided to write a rain effect to learn how to use SFML, and I would like to get some review on my code: i want to know how you would have write the program, and how to improve my code. This program ...
1
vote
0answers
37 views

Displaying sprites causing lag (2D platformer game)

I've made a 2D platformer game. The map is an array and I also have a separate array for entities such as spinning coins and moving enemies. This array is declared like this: ...
5
votes
1answer
95 views

Make a PPM chain showing a maze generated and solved

Beware: if you run this program with default configuration, it will produce from ~250 to ~1000 plain PPM images in the directory it's being run in, which all summed up will weigh ~4MB. These PPMs can ...
1
vote
1answer
4k 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? ...
3
votes
2answers
107 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. ...