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
2
votes
1answer
48 views

React component to animate planets on a canvas

I wrote some JavaScript to generate some graphics on a canvas, on a regular HTML page. I now want the same code to run in a component that is part of a React app. I've done this: ...
2
votes
1answer
226 views

Unidirectional Bootstrap 3 carousel

I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide transitions. I want to prevent slide transitions from overlapping when the bullets are clicked in random order and ...
2
votes
1answer
40 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 ...
2
votes
1answer
112 views

jQuery expansion menu

I have a menu done in jQuery that I'd like some feedback on: ...
2
votes
1answer
341 views

JavaScript to play and replay CSS animations on load and scroll

The following plays and replays CSS animations on load and scroll. It works but I'm wondering if there is a better way to write this, so it's cleaner and performs better. ...
2
votes
1answer
2k views

Panning JS canvas

I'm experimenting in canvas and trying to create pan effect. I've managed to pan succesfully, but I'm curious if I'm doing it correctly. Since I've come up with the following code myself, I don't know ...
2
votes
1answer
1k views

Scrolling game very slow

I am trying to make a scrolling game in Tkinter. However, with all my for loops and functions it is extremely slow. I am reading the tutorial from Khan Academy's advanced JS. In their JS game ...
2
votes
1answer
169 views

Random walker using Processing.JS on Khan Academy, with new walkers generated on mouse click

I've created a project on Khan Academy as part of the Natural Simulations course on random walks. This project is in JavaScript, using the Processing.JS library, slightly modified by Khan Academy. (...
2
votes
1answer
357 views

100 chairs in a circle problem solving with Angular.js and visualization

Here is the problem statement: Take a second to imagine that you are in a room with 100 chairs arranged in a circle. These chairs are numbered sequentially from One to One Hundred. At some point in ...
2
votes
1answer
148 views

Managing “active” and “rest” state for class name-based CSS animations

Started working with CSS animations and I'm wondering if there's a more elegant way to manage (with class names) when an animation is on or off. The general pattern I have is like this: ...
2
votes
2answers
1k views

Wobble-free progress spinner

I've been looking for quite some time to fix the wobbly spinner issue. Many people made numerous suggestions using fonts / pure CSS / CSS + JS. Unfortunately, none of the proposed solutions were ...
2
votes
1answer
2k views

Loader animation using Custom View in Android

I created a loader animation for an Android app: a simple 3 dots loader. Is this the correct way to animate by using TimerTask? ...
2
votes
1answer
242 views

Animation for collapsing/expanding a navigation bar

I wrote the following to create an animation which collapses a navigation bar, load new content for it and expands it again. Meanwhile, the rest of the page content fades out, loads and fades in again....
2
votes
1answer
113 views

jQuery eye candy for a WordPress site

This is a follow-up to this question my code has evolved since so I'm reposting my question. What is the best way to tidy this up? How can this be refined? I am finding it's thrashing the layout ...
2
votes
0answers
31 views

Matplotlib realtime monitor

I would like to share a matplotlib real-time monitor plot that I needed for another application. Basic trick is to reverse the time, so that t=0 is now and t=20 is twenty seconds in the past and to ...
2
votes
0answers
24 views

Two Angular animations for modal dialogs

I'm using Ionic 4 and Angular animations to animate modals. I created the following two functions that control the animations but they share a lot of repeated code. Is there a way I can clean these up ...
2
votes
0answers
56 views

Excel VBA animation runs slowly after editing worksheet

My VBA macro displays an animation based on a row-by-row time step simulation in the worksheet. The user enters the desired inputs and the worksheet calculates the evolution of the simulation in a ...
2
votes
0answers
885 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
0answers
49 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
0answers
381 views

Extend OnClickListener and animate view in android

I'm working on animation and I want to organize my code in best way I'm new in android and not know too much about this. Here is my code that I'm using to animate ...
2
votes
0answers
56 views

Task-List: Adding, updating and deleting tasks with CSS animations

I would really like to improve, so any feedback is so appreciated! Tasks.js ...
2
votes
0answers
44 views

GIF Animation in JME3

I made the following class to handle 2D animation through GIF images. This is made using JME 3.1, Java 8 and this GIF library. Is what I'm doing optimal? Are there already other available libraries or ...
2
votes
0answers
39 views

Optimizing rendering with a lot of transformations and save/restore

I have implemented a renderer for shapes described with a L-System grammar. Implementation of that is not important. Basically you feed it an angle and some rules, and it spits out a string of ...
2
votes
0answers
78 views

Simulation of reflected particles

I made a particle simulation in vanilla JavaScript. It can currently handle around 10000 particles (staying 58-60 fps on my machine). For testing, controls are MB1, MB2, R, Z. How can I make this ...
2
votes
0answers
696 views

Custom animated image control

I have written the following control which allows loading a gif from embedded resource, file, or raw Image. It allows for more granular control over the direction ...
2
votes
0answers
377 views

Swing keybinding to control an animated car

In my textbook there is no mention of keybindings and it encourages the use of keylistener so there isn't any example code using keybindings for its problems. I was wondering if this is sorta close to ...
2
votes
0answers
105 views

didSimulatePhysics to animate a ball, taking 45% of CPU

According to my time profiler this is taking 45% of my cpu usage: have tried to optimize, and someone on stack overflow -- recommended to post here. Time profiler says 99% of the time is spent on the ...
2
votes
0answers
134 views

Animation with JavaScript and Sass : Neon light banner

After reading a bit about CSS3-text-shadows and seeing a few advanced examples I had the idea for a "neon light"-banner. Next idea was to animate it. Finally it has become a mixture between a Sass-...
2
votes
0answers
6k views

Progress bar with percentage counter

Basing my work on a JavaScript progress bar created by another person, I added an animated percentage count. This solution is really ugly but it works. I don't know how to avoid having to declare ...
2
votes
0answers
67 views

Wrapping a small animation library for Angular

I've started out working on a larger project using Angular for the first time. For visual feedback, I'm using Waves (Github) (you can see a demo page here). The standard way to use Waves is to ...
2
votes
0answers
298 views

Dice-rolling Android app

This is just a simple app. All it's suppose to do is move the dice around the screen when the user swipes up or down. It will move 2 dice (image drawables) to a position on the screen depending ...
2
votes
0answers
256 views

JavaScript library for material design toasts (notifications)

This question is a follow-up question to this one. I wrote a small JavaScript library for material design toasts (notifications). I'd like to know what are my mistakes and how can I correct them? ...
2
votes
0answers
41 views

Slideshow scrolling photos horizontally using jQuery

I've written my own jQuery code to make a little slideshow. Functionally, it does what I want but I find that the jQuery animations are fairly jerky and because I'm a beginner in JS and web ...
2
votes
0answers
723 views

Interactive transition between view controllers

I have made an interactive transition controller in Swift in two different ways. This interactive transition controller is the parent class and I have few child classes which adapt the parent for ...
2
votes
0answers
2k views

Simple yet incredible parallax scrolling effect

I wanted to learn how to create awesome parallax scrolling effects so I decided to look up how to do it, after some searching I put together this test. It works fine to some extent but it feels a bit ...
2
votes
0answers
2k views

Optimizing snap SVG animation with collision detection

I have a snap SVG animation which animates a bunch of circles, and draws a line between them if they are within a certain proximity of each other. However, I realize that there is a lot of optimizing ...
1
vote
1answer
112 views

C64 loading screen

I have made a loading screen (splash screen) just like the old C64. I have used a series of picture boxes and just change the coloured image using a timer and a case statement. ...
1
vote
2answers
107 views

Various animation functions

I been learning web development for 1.5 month now, and I am trying to improve my code. I can achieve what I want, but I think my code is really bad. For example, I have a bunch of jQuery animations ...
1
vote
2answers
554 views

JavaScript change image every three seconds

I have a function that changes the image on a webpage every three seconds. I would like feedback on efficiency, good code practices, and anything else that can improve the quality of this code. It ...
1
vote
1answer
245 views

jQuery Slideshow with pagination

The code below is for a slideshow that shows a slide with class active, pre-loads a slide with class next, and holds the slide with class last in the background. My biggest issue with this is there ...
1
vote
2answers
69 views

Wireframe animation on canvas is slow

I'm recently working on a project that involves animation in the background. It works well on desktop but performance drops drastically on mobile. I'm using Paper.js to import a svg and animate it. ...
1
vote
1answer
56 views

Square Progress Indicator

On the Beme app, while a video plays, the border acts a progress bar, filling from upper left to upper right to lower right to lower left. I want to achieve that. And I have, but my code is ...
1
vote
1answer
62 views

Tower of Hanoi, ASCII animation with ANSI escape codes

A few days ago I saw a nice video on YouTube with prof Thorsten Altenkirch about recursion and the Tower of Hanoi puzzle. Today I tried to reproduce the code from the video and came to this: ...
1
vote
1answer
150 views

Closed particle system simulation in vanilla Javascript

I have ported my simulation from Java to vanilla Javascript. The most important aim was to keep the sum of all energies constant. I have this: simulation.js ...
1
vote
1answer
2k views

“Spinning wheels” - Animated spinner with SVG and Sass-CSS

I've made this little animation using SVG, CSS-keyframes and a bit of Sass. ...
1
vote
1answer
721 views

Parallax animation running well on Chrome but slow on Safari

This is the continuation of a previous question I posted here. I've improved (at least I think so) the initial script from the previous question, now storing the data in an array, it runs slightly ...
1
vote
1answer
189 views

Progress indication with animation

I have a game in which the player has to do something within a defined time. E.g.: the player has 10 seconds to complete a level. My current code animates an imageview (it's only a horizontal line) ...
1
vote
1answer
74 views

Coffee webpage with laggy animation

Currently designing a homepage and from some initial tests users are experiencing lag. I'm using some Javascript to create a parallel effect as well as an animated "click to explore" loop. Not sure ...
1
vote
1answer
559 views

Drawing multiple Images

Im trying to draw a lot of fields image for my world generation, all is perfect 64 fps, but if i began to draw all the time the grass it became laggy, like 59 fps (something that musn't happen! :( ), ...