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
1
vote
1answer
3k views

jQuery vertical div slider

In my project I need to do an automatic sliding vertical slider: ...
1
vote
2answers
466 views

JavaScript canvas bouncing objects

I have been playing with JavaScript for some time now and made a simple canvas animation. I tried to make my code clean but I would like to hear your opinions about it. GitHub ...
1
vote
1answer
49 views

AnimationFrameController: requestAnimationFrame made easy

I am looking for feedback on what I can improve to a tool I have been using for several months now, my AnimationFrameController. I find requestAnimationFrame an ...
1
vote
1answer
336 views

“Star Field” Animation with JavaScript and Sass-CSS

I've have make this animation on the weekend as a "just for fun" thing. And for to play with various techniques I've seen in others code. I think it works quite alright. Nevertheless I would ...
1
vote
1answer
228 views

Splitting text into individual characters for animation

I have code which makes use of jQuery and some additional libraries. But the jQuery part is too overwhelming (and thus it does its job slowly). So I tried to optimize it, but had no luck. Now I'm ...
1
vote
1answer
2k views

Simple GUI animation in Java

I wrote a simple animation of a ball moving across the screen. I was wondering if I used the static variable correctly. If not, how could I make it non-static so I ...
1
vote
1answer
67 views

Repetitive event handler for a toggling UI control

I feel like this bit of code could have been written more elegantly, especially with the huge if/else statements. Can somebody help me break this down? It would really help me out in the future. <...
1
vote
1answer
149 views

Eliminate nested HTML elements for jQuery animation?

Background When a user leaves a page, if they haven't submitted form data, a button is animated to draw the user's attention. (This is a poor UX choice--all the form data should be submitted--but it ...
1
vote
1answer
3k views

Tinder-esque location pulse animation effect

As shameful as it is to say I wanted to see what all the fuss about was with Tinder, but after downloading it I found I was more interested with its animation effects and started wondering how they ...
1
vote
1answer
417 views

Website with images that pan to different sides

I've just started programming with JavaScript and I am currently working on this hobby website project of mine. The site is supposed to display pages filled with product images than can be "panned" to ...
1
vote
1answer
221 views

Animation effects for menu items

I have pieced together some code that works for my project. However, it is pretty long, but self-similar. I am a jQuery beginner and I tried to shorten the code by using variables, but it didn't work ...
1
vote
1answer
244 views

Sequential animations

This is all about a whole lot of animations which should happen sequentially. That's why I am using promise().done() functions. In the end I'm binding a function to ...
1
vote
1answer
242 views

Fade-in / fade-out effects for several buttons

The function of this code is to show/hide divs by way of fadeIn/fadeOut, starting with an empty div (home) and fading in one of the other divs (work,cms,contact,) on click, then fading out the last ...
1
vote
0answers
25 views

Limit framerate [closed]

I have made this class. Not sure if there is anyway to make it better. It seems to work alright half the time, but other times frames jump up higher then the set limit around 30frames more if i set it ...
1
vote
1answer
65 views

Animation of adding / removing nodes from VBox

Method hide_old_show_new (I can't think of a suitable name) gradually, using FadeTransition, removes all nodes (from last to ...
1
vote
0answers
39 views

multiple AJAX requests and multiple SetTimeout animations

multiple AJAX requests and multiple SetTimeout animations I wrote a piece of code that included multiple AJAX requests and multiple SetTimeout animations. I want the code to perform better, ...
1
vote
0answers
124 views

Snake animation in Swing

I'm developing a simple Snake game in Java using Swing. So far I made the snake animation which is troubling me: when the snakes moves it seems like it starts to lag for no reason, but when I move it ...
1
vote
0answers
100 views

Animated Button on Android using AfterEffects and Lottie

I have a question about my implementation of a "special" Next-Button. First I want to show you my AfterEffects file: So This Animation has 3 parts Green: Entry correct Red: Entry incorrect Blue: ...
1
vote
0answers
88 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
0answers
26 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: ...
1
vote
0answers
1k 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 ...
1
vote
0answers
19 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 ...
1
vote
0answers
40 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: ...
1
vote
0answers
196 views

Animated Ticker with JavaScript and Sass CSS

I've made this animation using JavaScript and Sass CSS. Relevant is the code inside the IIFE. Because that's what I like to keep and develop further. Perhaps use it for future projects. Everything ...
1
vote
0answers
61 views

Animated Ajax loader: Ascending air bubble

This week I've had an idea for an Ajax loader animation: An air bubble ascending in a glass tube. Something like shown here: https://en.wikipedia.org/wiki/Spirit_level#/media/File:...
1
vote
0answers
54 views

Block breaking with paddle/ball iOS Game

I created an iOS app that recreates the "ball breaking" game where a paddle is used to deflect the ball to break blocks. The main purpose is to get familiar with UI concepts since I have primarily ...
1
vote
0answers
147 views

Line Graph animation with SVG and ES6 template strings

I've made this animation which shall be incorporated in the header of a webpage. Demo with compiled Sass and uncompiled ES6 code: ...
1
vote
0answers
441 views

Pointer hover animation for a five-star-rating picker

I want to shorten my code. You can see the following code i used many function for addClass, removeClass. But it is not usefully. Can do my work in one hover function ? If yes can anyone help me ? ...
1
vote
0answers
2k views

A custom UIView with gradient fill, border, and variable corner radii

Here is a swift port of UIView subclass that I use often in my apps. It allows me to easily set gradients in place of the backgroundColor property, and also makes it very easy to create views that ...
1
vote
0answers
386 views

“Moving gradient”-animation with CSS-keyframes and Sass

I've made this animation using Sass and CSS-keyframes. I'm bit worried about my usage of position relative / absolute. Can one expect that it works in all browser reliable? Or to I have to expect ...
1
vote
0answers
29 views

Sass-Mixin for to attach a text-shadow animation upon HTML-elements

I've make these mixins by using SCSS-Sass. Any hints and tipps concerning improvements are welcomed. ...
1
vote
0answers
34 views

JavaScript-function for to attach CSS-animations

The purpose of the function is to attach CSS-animations to HTML-elements with a text-content property. Like for example h1, div, p etc. It's not fully elaborated. Nevertheless have I decided to put ...
1
vote
0answers
1k views

Dice rolling swipe Android app

So I've got an Android app where if you swipe in a particular direction (UP, DOWN, RIGHT, LEFT), the dice move in that direction using TranslateAnimation. This is ...
1
vote
0answers
543 views

CPU friendly infinite text scroller - velocity

I've done some research today and read a lot about JavaScript performance. I learned that animating using the transform: translate makes a use of the GPU, hence ...
1
vote
1answer
39 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 ...
1
vote
1answer
37 views

Overriding default animation parameters with custom values

Using JavaScript ES5, I would like to know if you could suggest me a more "elegant" and succinct way to overriding defaults variable when User pass custom values. In the following example, an ...
0
votes
1answer
55 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 ...
0
votes
2answers
61 views

Simple cube that moves around the container with keys

I made a basic cube that can move around of container and jump too. It's basic but I want to know if I can use better methods, better formatting, or shorten the code. This my HTML: ...
0
votes
1answer
155 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: ...
0
votes
1answer
160 views

Yes/no confirmation buttons on a slide-out panel

I have the following js code and am wondering how I can make it clean. It works fine but there are few repetitions. Is there a way to make it more clean? ...
0
votes
2answers
294 views

Two icon animations — one on the left, one on the right

I have two icon animations that pretty much do the same thing, the only difference between them is positioning... one is left and the other right. I would like to use one block of code for both left ...
0
votes
1answer
49 views

Making an image slideshow

I wrote a function to make a image slideshow in javascript using for() loop, setTimeout() and ...
0
votes
1answer
70 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 ...
0
votes
1answer
51 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 ...
0
votes
1answer
92 views

Calculating an object's stopping distance

I'm trying to smooth the movement of a cursor which has a set acceleration and max speed. I wrote this function to calculate the stopping distance of an object given its speed and acceleration, and it ...
0
votes
1answer
647 views

Colour-changing clock

I am fairly new to javascript and I would like to write my code on a more readable and efficient way. Any critique of what I've written would be greatly appreciated, especially the section of ...
0
votes
0answers
21 views

Multiple animation control using Vanilla JS ES6

What I'm doing Divide members into five section, and apply animation for each member to reveal at first. When I click the section, it is expanded to whole viewport and introduce detail about ...
-1
votes
2answers
103 views

Animating 70 classes of models

How do I write this function more efficient? My class names always contain modell and essentially, only the numbers are changing. Is it right that I get a better ...
-1
votes
1answer
315 views

Optimizing this SVG animation for size [closed]

I'd like to code review generated svg animation, while this might stretch definition of this site, I really hope this is interesting and revelant topic, as this SVG file is really like any other ...
-1
votes
1answer
261 views

Simple elevator-like animation android

...