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
3answers
576 views

jQuery animation and rotation effects for a WordPress site

What is the best way to tidy up JavaScript code I have written? It seems very long winded, any suggestions to shorten it? Note: I'm running it on Wordpress which runs jQuery in nonconflict mode, ...
3
votes
2answers
2k views

Text revelation effect

I would be glad if someone could take a look at my code and maybe improve it. It's an animation effect to gradually reveal text as if it were being decoded. I wouldn't mind if it could run with jQuery ...
3
votes
2answers
62 views

SRT caption support for HTML5's video element

With HTML5 you can add captions to your video using the <track /> element. However, only vtt files are officialy supported, while the current most populair ...
3
votes
1answer
102 views

C++ console progress display

I just figured out how to do a building menu with a progression feature in c++ console application. What this code does: It simply offers you a choice to build a building and then prints the ...
3
votes
2answers
378 views

Animation that cycles through background colors

I am doing a background image animation using the function. It works, but I think I am doing more coding than what it requires. Can anyone please help me to minimize it? Don't recommend the CSS ...
3
votes
1answer
50 views

Print file out 1 character at a time in the terminal - Python

This program opens a file and prints the text out to the terminal 1 character at a time and at a predetermined speed using time.sleep() Simple and maybe, if you ...
3
votes
2answers
70 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
216 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 ...
3
votes
2answers
287 views

Maximize the number of PyGame sprites, with collision detection

I was trying to see what is the highest number of moving and colliding boxes (sprites) I could get in pygame? So that I could start working on game I want, I searched google and I found different ...
3
votes
1answer
610 views

Explosion animation plugin for a game

I have been writing a small particle plugin since I want to learn how physics works for games. Now I have tried to get this as clean as I possible could but It feels something is missing. Am I ...
3
votes
2answers
500 views

Show and hide posts using setTimeout

I have made an effect that has the h1 move and then reveals p using .addClass, ...
3
votes
2answers
21k views

Acceptable way of using jQuery methods in Angular directives

Here is my plunker example of what I am doing. jQuery is a great way to use slide transitions and seem to work well with angular as long as you are only using the methods on the element object inside ...
3
votes
1answer
7k views

Updating a jquery progressbar via button clicks

I'm trying to get my progress bar animated. I'd like it to smoothly transition in between the starting and destination values, but only be initiated by clicking the continue button. The code I ...
3
votes
2answers
293 views

Making a ul list element animation on hover

I have an experimental script that makes an animation of a ul list element background-position, when the list element is hovered. Is there another way to manage ...
3
votes
1answer
469 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 ...
3
votes
1answer
1k views

Basic animation in Typescript

I decided to play around with doing my own super-basic animation. For a previous Javascript project, I needed the ability to flash an element. The code below is the result of me attempting to ...
3
votes
2answers
439 views

Console animations

I'm a coder who's relatively new to Python and I wanted to spice up my console applications a bit by making animations. The code I've written works perfectly, but I just wanted to know if it was good ...
3
votes
1answer
151 views

Animating sprite without libraries

I'm building a small game in pure JS for my own learning purposes, using sprites to model players. Before I go further, I want to try to get the animation down. The below code should produce a blank ...
3
votes
1answer
1k views

Generating SVG animation of falling leaves

This is a Python script I wrote to generate a SVG animation of falling leaves. How can I simplify my script and also make the animation look more realistic? ...
3
votes
1answer
670 views

Loop Animation on several UIButton's NSLayoutConstraint

I took the belated plunge to look at Autolayout. Normally I'd animate based on a UIView's frame (i.e I'd have used the following): ...
3
votes
1answer
130 views

Animating based on screen width

Depending on the width of the screen the JavaScript animates a node and then loops another animation. I'm trying to understand DRY but my JavaScript skills aren't quite up to scratch to get this code ...
3
votes
2answers
196 views

Expandable text boxes for legends of fieldsets

What is the best way to refactor the following script? ...
3
votes
2answers
141 views

Periodically sliding images

I wrote this code using jQuery, but I think it can be improved. Can you provide some feedback? ...
3
votes
1answer
45 views

Monte Carlo pi animation

I have created a program that calculates pi using a Monte Carlo method. It also animates the process and displays the value as it is updated to show how it gets closer and closer to the actual value ...
3
votes
1answer
27 views

Recamán Sequence Animation

I wrote a program that animates the Recamán sequence. It is in uses HTML canvas and JavaScript. I was hoping for some feedback on how it could be improved. ...
3
votes
1answer
73 views

Plain Page Flip Effect

I've created a very plain version of page flip onscroll. I made it to look like turning the pages of a book. It looks OK on browsers I have (Firefox 52.9, Chrome 49, IE8). Though the effect doesn't ...
3
votes
1answer
667 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 ...
3
votes
1answer
551 views

Animating the appearance of a title with CSS

To sum up my project was about making cool animation of titles appearance with an effect of a colored block coming from one side while expanding and disappearing from the others side while contracting ...
3
votes
1answer
85 views

Ribbon animation code too repetitive

I spent the last two days getting a ribbon animation to work with divs so that I can later add li link elements to them to act as a menu. I used the progess bar animation code as inspiration from ...
3
votes
2answers
3k views

JS cross-fade transition

As the question says....Can this be done any better? I could introduce more variables to cut down on function number, but does it make sense? So this is a simple cross-fade between two images : ...
3
votes
1answer
156 views

Fireworks animation causing high CPU load

This web algorithm is causing even newer computers to freeze with CPU spikes from 20% to 90%! How can I make it more efficient? EDIT: An idea is to somehow get rid of the filter:blur(); property ...
3
votes
2answers
1k views

Sliding effect with bounce

I have used animate.css and jQuery as external libs. Is there a better way of doing what I have done with jQuery? DEMO ...
3
votes
1answer
89 views

Slow update function

I've been fiddling with Unity, trying to make nice walking/running animations. So, i found the Stealth tutorial and I used pretty much the same animator as the AI, only I only use Speed and ...
3
votes
2answers
2k views

Remove, Append, and Resize Using jQuery

I'm trying to essentially replace an element and make it transition smoothly to the new size... I started off trying to work with the appended element itself, but the padding and margins made that ...
3
votes
1answer
64 views

Combining four functions for toggling gallery displays

Here is my HTML: ...
3
votes
1answer
3k views

UISegmentedControl with view-animation

I have create a UISegmentedControl and a view under it. The view under contains all a view for each segment. I am doing an animation when the segment is changing. ...
3
votes
1answer
112 views

Animation delay

I have wrote some animation code, and it's what I class as old school. As you can see, there is a lot of repeating code. Ideally, I would like to be able to take the delay and left or right position ...
3
votes
1answer
133 views

Single Rotate Method

I just started coding a simulation-like application. It's about our solar system. Right now, I'm working on rotating the moon. I have this constructor ...
3
votes
1answer
330 views

Small animation with Raphael

I have a small animation with Raphael using a large amount of code. Is there any way to reduce it? Demo ...
3
votes
1answer
2k views

Updating progress bar animation

The general idea is is a progress bar that updates the totals and percentage continually. This just gets a bit choppy when I trigger a few of these independently on the same page. I'm doing a bit of ...
3
votes
1answer
284 views

Animation of multiple text elements in sequence

I feel like this isn't the most effective nor efficient way of doing things: ...
3
votes
1answer
232 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
76 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
73 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
112 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
203 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
207 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 <...