Questions tagged [animation]
For questions related to graphical animations. This includes, but is not limited to sliding, tweening, rotating and resizing of shapes.
379 questions
7
votes
3
answers
807
views
Optimizing real-time ASCII playback in Python when each frame is fetched as a PNG via GET
Why I made it
I wrote this script for one simple purpose: to Rickroll my friends.
How it works
This is the workflow:
It fetches a .png frame from a PHP endpoint on a website I own. The frame number ...
3
votes
0
answers
86
views
React draggable sliding panel
I'm building a sliding bottom panel as a React component, adapting Phuoc Nguyen's excellent draggable element tutorial.
It currently looks like this:
The expected behavior is:
User taps on button to ...
3
votes
0
answers
56
views
Colorproof dust effect
A combination of various css transitions (background-color, box-shadow, opacity, ...
0
votes
1
answer
136
views
Creating custom setTimout function using requestAnimationFrame loop
I created a function using requestAnimationFrame loop that works pretty much like the plain JS setTimeout function (except that ...
5
votes
1
answer
780
views
Bash script simple countdown timer with dotted output
My goal is to have a timer function that operates from the bash linux command line. I am looking for review and feedback. Printing the expected number of characters (dots, dashes, or bars) is nice-...
2
votes
1
answer
1k
views
Animating GIF on hover in Javascript
I don't know JavaScript and it's safe to say this is my first code ever written in JS.
I just needed to animate my GIFs when user hovers over them only.
Googling separate concepts such as "string ...
2
votes
1
answer
323
views
CSS gradient text that fades in and out
Here I have a basic text gradient effect which fades into a gradient animation, and fades out of the animation on hover in/out. Without the fade in, it looks janky and jolty. But because of the fade-...
1
vote
1
answer
204
views
Sidenav menu that appears when click on button
I have a side menu that appears when click on button, which works fine. But now I want to clean up my code, shorten it if possible. I was wondering if there is an easier and cleaner way to achieve the ...
2
votes
1
answer
190
views
Trouble with rendering speed of the animation of a simulation?
The following code is a conversion from some old java I wrote to python.
It shows the beginnings of a simulation of an ant colony.
I am finding the animation speed very slow - and I'm wondering if I ...
2
votes
0
answers
117
views
Interactive Gundam using only Matplotlib
The code below plots a background image (sky) and then a Gundam sprite using Matplotlib. It also creates 4 buttons with obvious purposes.
The Gundam class stores 2 ...
1
vote
1
answer
148
views
Trying to follow Single Responsibility Principle with download and show progress
Let's get right into it, I have a function downloadFile(url, path); Downloads file and saves it.
donwloadFile.js
...
4
votes
2
answers
288
views
Prey Throbber using CSS Animation
I'm migrating to web development and wanted to learn CSS animations better. I was playing Prey last night and realized the "throbber" on the elevator screen would be interesting to ...
4
votes
1
answer
119
views
Four HTML tabs elements, with fade animations, activated by buttons
I am pretty new to Javascript and trying to make a really simple tabs element which is just hiding and showing sections depending on which button is clicked. I know that this is a terrible way of ...
1
vote
2
answers
2k
views
Animate circle using Javascript and HTML5 Canvas
Animate circle using Javascript and HTML5 Canvas. The circle will be drawn at the center of the canvas. The initial radius will be 0 and will keep on increasing till 100 and then decrease till 0 and ...
2
votes
0
answers
81
views
JS icons animation
I've written a simple JS that takes care to animate an icon.
At first I wrote it quickly and without paying attention to any kind of optimization:
...