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
3
votes
1answer
268 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 ...
3
votes
1answer
78 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
74 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
1answer
115 views

CSS3 Animated Loader

I am fairly new to HTML and CSS and have been trying to make things with whatever knowledge I have. I created a 'loader', but I'm certain that I have done things in ways more complicated than they ...
3
votes
1answer
112 views

Mouseover effects for social network icons

Hey so I have written some code out in jQuery, but it seems to violate DRY. I'm not too familiar with JavaScript or jQuery, so I was just asking for some advice on how to optimize this code: ...
3
votes
1answer
208 views

Three-layer parallax effect

I want to make it lightweight (fastest, best performance) as it possible for browser, but I have no idea - I haven't huge knowledge about JavaScript. That code run parallax effect on my web page. I ...
3
votes
3answers
136 views

Displaying image for the selected year

I have the following code and I'm trying to find a cleaner way to run the year functions. At the moment I have 5 years as divs with an onclick event to bring the appropriate year image into view. So ...
3
votes
1answer
103 views

Manual slide-in animation using delta time

I created a simple slide-in animation for my game. The box is shown at the bottom with character dialog. The animation is as follows: A square slides in from the left, then waits a bit, then expands ...
3
votes
1answer
208 views

Portfolio landing page

I'm trying to grasp this whole MVC design pattern idea but I'm in the dark if I'm doing it correct. This is where I need some feedback on what I've done so far. Here's what I'm wondering: Does the <...
3
votes
1answer
6k views

Loading GIF form on a Windows console app using threads

I have a main form which does processing for an extended period of time. Normally, progress bars are used to show either the loading status or simply show the program is still running/hasn't freezed. ...
3
votes
0answers
56 views

Animation of an incremental rotary encoder

While reworking my teaching materials for an exercise of an introductory course on mobile robotics, I recently created a animation/simulation of an incremental rotary encoder, e.g. often used for ...
3
votes
0answers
55 views

Pygame : processing speed independant image loop displayer

I made this in order to teach myself pygame. This displays an images loop at the same speed on any computer (It will lag on a slow computer). Is my time management good or do my datetime call could ...
3
votes
0answers
119 views

Forest Fire Cellular Automata

I stumbled on the idea of a Forest Fire simulating cellular automata, and decided to try making a version using a full Seesaw UI (a Clojure wrapper over Java's Swing). A short sample of it running is ...
3
votes
0answers
23 views

Sparking animation for Button

I just came through a GitHub repo, which has an amazing animation for Button in Android. So, I though why not make that for web buttons too. And I started ...
3
votes
0answers
659 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 ...
3
votes
0answers
121 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
0answers
768 views

Alternative for Float Animations

In the Firemonkey framework of Delphi, there's a feature called Float Animations, which allows you to control real-time "animation" of float values. However, in the VCL framework, this feature is not ...
3
votes
0answers
153 views

Fade and slide animatable elements on window scroll

I wrote a simple JavaScript function to animate objects on my webpage to fade and slide in from the bottom of the screen when the user scrolls them into view. I did this by using JavaScript to add ...
3
votes
0answers
181 views

Animation for android ImageViews acting as game pieces

My question is about how to achieve a well-performing animation for a set of ImageViews, so that the foreground fades away and the background stays the same. ...
2
votes
4answers
257 views

Using visual themes in a game

In my small application, I need to use a variety of visual themes. The simplified structure of this class: ...
2
votes
3answers
135 views

Animating the opacity of certain page elements

I wrote this jQuery code to animate the opacity (sort of Fadein) of certain elements on my page in consecutive order. It feels very inelegant, though. ...
2
votes
2answers
543 views

CSS3 animations of a turntable

I have the following code, which acts like a turntable and plays Sgt. Pepper when you load the page. This works only in Safari (I suppose I can delete the FF parts then), so I'm wondering how I can ...
2
votes
3answers
134 views

CSS animation via JavaScript

I call this animateElements function as part of an animation loop (inspired via Dave Gamache). Everything works as expected, but I would love to try and improve/...
2
votes
3answers
263 views

Animating rotations using jQuery

I am writing a function for a rotating navigation with JS and jQuery. I am using a plugin called jQuery transit for animating rotation. The code works, but it is very long for such a simple function. ...
2
votes
2answers
238 views

Window-size-dependent navigation menu with animation effects

Other people will be looking at this jquery code and i'm not an expert with jQuery so im asking. How can i make this jQuery code shorter, more efficient, and easier to read? ...
2
votes
2answers
83 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
2k 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? ...
2
votes
1answer
8k views

Click on an image to zoom in

I'm still a newbie when it comes to javascript, so I don't know yet how to optimize this code. customize.js ...
2
votes
1answer
2k views

Follow-the-cursor eye animation

I have code for googly eyes that is too long. Basically I have variables for each element pupils (one for right -other for left), eyesockets (left, right). I wish I could compress my code so I can ...
2
votes
2answers
59 views

Maintainable way to concatenate strings in JS and vendor prefixes

I am writing a jQuery plugin which, among other things, inserts a stylesheet in the head. Additionally, I also require vendor prefixes. A lot of values are derived from variables in the script, and I'...
2
votes
1answer
44 views

Two sprite-drawing functions for Amara game

Ideally I would have one draw method in the parent class (Player). But I can't figure out how to do this. I don't know if there is anyway to decouple it totally. I ...
2
votes
1answer
302 views

Loading screen animation

I am trying to make a loading screen but my code isn't DRY. How could I make it DRY? I have thought about using CSS3 keyframes but I might have problems cross-platform. ...
2
votes
3answers
1k views

jQuery animation/blinking code?

I have one container div which contains some children div members. From time to time, I need to run a custom blinking effects on ...
2
votes
1answer
1k views

Best way to refactor this loop of animations with delay?

I have some animations happening after some delay calls the code to animate. It works fine, but the code to call the functions is not nice. ...
2
votes
2answers
7k views

Animation with 5x5 map of cubes

I am trying to learn how to animate with tkinter. The code below is an example I was able to build. It creates a small 5x5 map of cubes, then one of them randomly moves around the screen (preferably ...
2
votes
1answer
5k views

Scrolling, fade-in, and fade-out effects feeling clunky

I'm coming close to finishing a site where there are a number of jQuery functions going on. They all work, but the page is just running a bit too clunky. The fading in and out is just not as smooth as ...
2
votes
2answers
120 views

An “Add” button that clones an item, and a “Remove” button that fades and removes an item

I was looking into removing multiple inputs and selects at once using jQuery, but I couldn't find a solution, so I ended up with the following code: ...
2
votes
1answer
320 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 ...
2
votes
1answer
53 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 ...
2
votes
1answer
4k views

Animating multiple views in Android efficiently

I am currently making an application where the user will launch the app and the first this we see is the app logo fade in at the center of the screen. After about a second, the logo will translate up ...
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
2answers
65 views

Text 'guesser' / tumbler like animation

I made a tumbler thingy... Do you see possible bugs in the code or any improvements I could do? ...
2
votes
1answer
213 views

Scrolling with an easing function

I wanted to write a function that when invoked, will scroll the page downwards in a smooth fashion. Comments and criticism welcome. I don't like, for example that determining whether it is done is ...
2
votes
1answer
3k views

A simple analog clock using FLTK

I'm implementing a graphical representation of an "analog clock" with moving hands (seconds, minutes and hours), using mainly2 FLTK facilities and the function ...
2
votes
1answer
762 views

Overriding scrolling behavior for navigation elements

I am new to JavaScript, and trying to ensure the i write the best possible code instead of "copy & paste". I hope i am asking correctly, want to know if my code I have written is done correctly ...
2
votes
1answer
329 views

Number processing slower with asm.js

I did a few times ago what I called a plasma in plain JavaScript: jsFiddle The idea is to use 2 oscillators (LFO) which have their frequency + phase driven by two oscillators each. Then we use those ...
2
votes
2answers
1k views

Thread, handler and activity structure for a bouncing ball animation

This is a custom MyActivity class with two custom views (bar and a ball): ...
2
votes
1answer
354 views

Promise-driven animation

Inspired by this question on Stack Overflow, I've attempted to code such animation, mostly to get some more practice with async, promises and Q.js: (Live demo) ...
2
votes
1answer
1k views

Timeline animations

I recently made this campus timeline for my university. When viewing the timeline on a mobile device (not a tablet), the navbar changes so that you can jump to the previous or next decade by clicking ...
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: ...