Questions tagged [animation]
Animation is the rapid display of a sequence of visuals in order to create an illusion of movement or change.
44,295
questions
0
votes
0
answers
6
views
In 2D animation, the character goes into idle mode when a key is pressed in unity
Instead of animating a character in an inactive(Idle) state.
The B key is pressed here:.
After a while the animation works again:.
Exit time is disabled for transitions.
Player Controller file code:
...
0
votes
0
answers
5
views
How can I ensure that my first animation completes before starting another animation using Framer Motion?
I have a div and inside that div I am mapping an array to show list of navlinks inside "p" tag. Each navlink has its own animation, and parent div has its own animation. I basically have ...
0
votes
0
answers
11
views
Animation and Hit Registration issues with 2d fighting platformer
I have been working on a 2D fighting game, and it has been mostly going well, except for a few issues. I am working on 3 separate JavaScript pages, and one HTML page. My issues are present in the ...
0
votes
1
answer
10
views
How to add animation on react-chartjs-2 ? Like Crash Game?
I need to develop crash game, so i am using react-chartjs-2 NPM and run the graph successfully.
But our client ask to animate the graph line, like add gif image on graph line. How to animate the graph?...
0
votes
1
answer
23
views
How to transition text along with a circle in CSS animation?
The code I am developing is for mobile site and the animation I expect is as following: Firstly a bigger circle appears such that it covers the whole screen looking like a splash screen and afterwards ...
1
vote
1
answer
29
views
SwiftUI Transactions: Making a button that either animates or is still, based on external state
I'm trying to make a view that conditionally animates (repeating forever) based on the state of another view.
This below button does it all in one view... but that state is all internal. I want it to ...
0
votes
0
answers
15
views
Animate elements on scroll using framer motion only when they enter the viewport
I am using the below custom hook to animate elements on scroll
import { useAnimation, useInView } from "framer-motion"
import { useEffect, useRef, useState } from "react"
export ...
0
votes
0
answers
15
views
SwiftUI: UI is lagging on conditional font weight change
I have this rather simple code, but I am having some trouble with the conditional change of the font weight. The change from .medium to .heavy and vice versa, does happen, but it’s lagging.
I am not ...
0
votes
0
answers
9
views
Animating component height with AnimatePresence and Framer Motion in a React component embedded in Astro not working, what am I missing?
I am trying to integrate a React component in an Astro app, using Framer motion's AnimatePresence component to change the component height.
Even after specifying client:load as the client directive, ...
1
vote
0
answers
70
views
animation motion happens instantly
I have made a custom humidity indicator component that consists of a vertical rectangle with a central circle. The purpose of this component is to visually represent the percentage of humidity. ...
0
votes
0
answers
9
views
How can I remove the animation from ListPopupWindow dropdown in Android?
How to disable the ListPopupWindow's dropdown animation?
I've tried below setting but still not working when the popupwindow show, it still perform as a default dropdown animation.
popupwindow= ...
0
votes
0
answers
16
views
reading animations.length, length is zero - I don't remember how to set up my animation
When downloading the glb it says it has some animations, but when I check with console.log(gltf.scene) it's empty!?
I have used this particular model before with animations and seen it running.
But I ...
0
votes
0
answers
21
views
css animation fade in the text from top to bottom as eraser
I need some help my aim is to achieve CSS animation on a div containing three lines of text and I want to switch between them where just one appears when moving from one line to another I want to make ...
-3
votes
0
answers
10
views
Which company's computer is the best for blender animation production? [closed]
Which company's computer is suitable for blender animation production?
this going to be my first time creating an animation on Blender.
I researched on Youtube and seemed everyone had different ...
0
votes
0
answers
7
views
Framer Page Transition does not fire
I'm using nextjs 13 and i'm trying to make a page transition.
This is my Code:
// layout.tsx
// ...
<DetectRouteChange>{children}</DetectRouteChange>
// ...
// detectRouteChange.tsx
// I ...
0
votes
0
answers
14
views
animejs - the animation only plays again when useEffect is used
During the first rendering, an animation written in this way plays correctly:
const Page = () => {
anime({
duration: 5000,
targets: '#welcome-text, #welcome-lower-text',
...
0
votes
0
answers
27
views
Start a keyframes at scrolling and when element appears on page with javascript
I have a CSS animation for progress bars that fill up. I would like to use Javascript to trigger the animation when scrolling over it and when it appears on screen.
It works when the page loads and ...
-2
votes
0
answers
11
views
Framer motion - background image transition with fading effect / smooth transition [closed]
Framer motion - background image transition with fading effect/ smooth transition
I would like to do an animation in reactjs with framer motion whileInView a div. The animation would be a background ...
-2
votes
0
answers
8
views
My scrollreveal and typed.js animation functions are not functioning as expected. What could be the problem? [closed]
my scrollreveal function is not working , according to the tutorial the code is complete , but i don't know why its not functioning as supposed.
same thing with the typed.js animation , its not ...
-1
votes
1
answer
36
views
Animation is Very Choppy Uneven - How to Improve?
SUMMARY
very basic pygame animation results in choppy visuals. How to resolve?
DETAIL
I have very basic python/pygame code to animate a rotating circle moving around in circular path. However when run ...
0
votes
0
answers
14
views
Animate element position in received one via web sockets using JS and CSS
The feature is to draw the cars moving by track. Track shape is simplified to circle. I receive the data via web sockets ~5 frames per second. In every frame I receive the pecentage driven by track ...
0
votes
1
answer
35
views
Why image is not zooming in or out
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
&...
0
votes
0
answers
14
views
How to change image and highlight text on scroll via Scroll hijack?
Hi guys need your help to implement an animation which I am trying to build. I want to change the image and highlight the text related to that image respectively while scrolling.
My only challenge is ...
0
votes
0
answers
16
views
Vue-type failed to resolve component in nuxt3
To apply some fancy animation to text, I'm trying to use vue-typer in a nuxt3 project.
Then I installed the package with:
npm install --save vue-typer
So I simply use the component in a template with ...
0
votes
0
answers
30
views
Automatic scrolling with animated typer animated text kit in flutter
I am looking for a way to implement this in Flutter. Auto-scroll as animated text kit typer is typing out contents like following
I tried using this as a function for the scrollController in a ...
1
vote
2
answers
33
views
+100
Flutter: pie_chart plugin animation scrolling problem
I have this Pie Chart created by Flutter pie_chart plugin.
return SizedBox(
height: 150.0,
child: Stack(
children: [
PieChart(
...
0
votes
0
answers
15
views
Create (a portable) interactive image
Description: (essentially three requirements)
I'd like to create an image based on drawings from friends (possibly mixed with photos), but I'd like the image to be interactive. I mean, for instance ...
0
votes
0
answers
9
views
scale animation overlaps beyond frame of parents view
I scale a cardview with an image view inside. It runs correctly. The cardview is an element of a convert view within a gridview. There is a space between the cardview and the frame of the convert view,...
0
votes
1
answer
12
views
Plotly. Animated 3D surface plots
I want to make a 3D animation using Surface of Plotly.
However, I run into two issues:
(1) When I press play, the figure is only updated at the second frame.
(2) I see all the previous frames as well. ...
0
votes
2
answers
41
views
What's the best way to create non-symmetrical buttons with scaling animations on hover for my portfolio website?
So I'm trying to make this website and use it as my portfolio, since I'm starting to get a job.
I'm having some issues with creating the website, more so with the animation that I want to create.
...
0
votes
0
answers
20
views
Create a looped gif
in my project i need add text on gif and i found a solution there, but the solution make the animation one time. I would like animated more times (like a real gif, dont stopped).
Image IMG = Image....
0
votes
0
answers
19
views
Use keyframes to change the width of an SVG while keeping it static on the page
I am attempting to animate an SVG. In the example below, the pink square moves 50px to the right. I am attempting to make the orange rectangle's right side grow to match the location of the pink ...
0
votes
0
answers
14
views
React stacking array of images horizontally when trying to add animation and using .Map
So I'm trying to add slide animation on the the images but it not working as intended, the slide animation is working but the images gets stacked over in line horizontally and rest of the slides are ...
0
votes
1
answer
26
views
Need help creating animation on scroll down
I'm not proficient in animation. I want to create some animation on scroll down.
So could someone suggest to me?
I tried is svg path, not ok.
What I want is when the visitor is scroll down, the images ...
0
votes
1
answer
21
views
React native animation change colors and moving
I'm from a new family with React Native. I'm now working with react native animation to change components from JSX to react native. Here are the sources:
JSX: https://playcode.io/1486089
Expo: https:/...
0
votes
0
answers
25
views
I want to include any animated gif in my beamer presentation?
Can anyone guide me on how to include any gif into the beamer, for example, animated Thank you for the last slide? Any MWE will do. I have included mine.
\documentclass[aspectratio=169]{beamer}
\...
0
votes
0
answers
15
views
React: Sliding Animation and Conditional Rendering
I'm creating a React.JS Web App for educate myself. I want to create something like that: https://dribbble.com/shots/5311359-Diprella-Login.
Here is my sandbox: https://codesandbox.io/s/login-register-...
-1
votes
0
answers
36
views
Lenis Scroll to only affect one section of the website
I wanna create a section in the style of this hero-section: https://www.untitledui.com/
The animations and elements work as intended, but i am missing the delay/smoothness that happens when you scroll....
0
votes
1
answer
31
views
How to I stop my game object from moving on the y axis in unity
I making a game in unity where the objective of the game is to move a cube along a platform by rotating in onto the next face in the direction that you want to move it towards.
in order to finish the ...
0
votes
0
answers
19
views
Animating alternating circles on canvas with gsap + scrolltrigger
https://codepen.io/handiworknyc/pen/GRYLjeE
Hi all, thanks in advance for your help.
I've never really used canvas before but i got pretty far with ChatGPT...
However ChatGPT was not good at getting ...
0
votes
1
answer
19
views
How to add animation to responsive Nav in React
i want to add an animation or a transition when pressing the button to open de menu on the Nav.
The button appears when the screen is small
Here is the code
export const NavBar = () => {
const [...
0
votes
0
answers
31
views
Julia lang animation from vector of figures
I am using Julia and all I am trying to do, is to chain 100 figures into an animation. (I do NOT want to change parameters within a plot in my figure) I can't make it work for hours now, although I ...
-1
votes
0
answers
21
views
How to make it so that instead of circle there was an element that ran and coincided with the path contour
I don't know how to make the element run and match the outline of the path. I am using react typescript.
I managed to make the circle move along the path, that is, its contour. But I want instead of a ...
0
votes
0
answers
18
views
Transition Views in a List View (SwiftUI)
There are views in a ListView. The views have the transition modifiers on them but no transition occurs.
The List is made to appear first before its chid views are rendered. Here's some code to ...
0
votes
0
answers
12
views
Implementing camera tour along 3D text in React using Three.js and GLTF model with mouse wheel scroll
this the visual representation of the 3d text model
This the drive link of the 3D model itself and the video representation of what i am actually trying to acheieve
I have a 3D model of text written &...
1
vote
1
answer
60
views
CardStack and Lottie
I'm working on animations. It has a stack of scarts on which are Lottie animations. The CardStack library is used for cards, and Lottie is used for Lottie.
In the CardStack library, the configuration ...
0
votes
0
answers
21
views
How to export multiple animations with constraint from Blender? (glTF 2.0)
Problem:
When exporting to glTF for use in Godot, only the top animation track in the NLA editor is exported correctly. All other animations are broken and misaligned.
misaligned animation
I have ...
0
votes
0
answers
10
views
how to add snap scroll and aos to the same component
so i am creating a component and trying to implement snap scroll and aos both but only one is working let me provide the code and ill explain the problem
* {
margin: 0;
padding: 0;
box-...
0
votes
0
answers
16
views
How can I make the 'previous' button return to the first slide properly?
I am doing a course for JavaScript in Coursera and there is a project to create an image slide using jQuery. The button for the "next" image is working fine, but the "previous" ...
0
votes
0
answers
24
views
React Native: Animated value's .setValue() doesn't work (Animated API)
I've been struggling with making a specific animation using Animated API in React Native:
An accordion that expands, and 2 seconds after that, 3 buttons fade in one by one, with a stagger of 200ms.
...