As of May 31, 2023, we have updated our Code of Conduct.

Questions tagged [animation]

Animation is the rapid display of a sequence of visuals in order to create an illusion of movement or change.

Filter by
Sorted by
Tagged with
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: ...
Nech's user avatar
  • 1
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 ...
Abdullah Abbasi's user avatar
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 ...
james_shortt's user avatar
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?...
pifedhuihed h's user avatar
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 ...
Hetvi's user avatar
  • 1
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 ...
Jack's user avatar
  • 35
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 ...
first's user avatar
  • 539
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 ...
N G's user avatar
  • 15
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, ...
JamesH7's user avatar
  • 13
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. ...
Starnec's user avatar
  • 539
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= ...
Jorbe Tracy's user avatar
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 ...
William Knutsson's user avatar
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 ...
fadi omar's user avatar
  • 742
-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 ...
Dora's user avatar
  • 1
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 ...
PixelPage's user avatar
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', ...
kusiewicz's user avatar
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 ...
Bertou19's user avatar
-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 ...
Berenice's user avatar
-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 ...
Black Box's user avatar
-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 ...
greencapped's user avatar
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 ...
Nina Herasymova's user avatar
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"> &...
Sabarish's user avatar
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 ...
coderX's user avatar
  • 173
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 ...
Teo7's user avatar
  • 7
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 ...
Melchizedek's user avatar
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( ...
rafa_pe's user avatar
  • 135
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 ...
DrKapichu's user avatar
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,...
Maximilian Notar's user avatar
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. ...
cerv21's user avatar
  • 301
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. ...
NotprQn's user avatar
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....
Andrezila's user avatar
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 ...
JohnnAustin12108's user avatar
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 ...
Nirvana's user avatar
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 ...
Ariel's user avatar
  • 31
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:/...
John.D's user avatar
  • 55
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} \...
NIT India's user avatar
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-...
Görkem Tandoğan's user avatar
-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....
Philipp Schramm's user avatar
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 ...
MIM's user avatar
  • 5
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 ...
HandiworkNYC.com's user avatar
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 [...
Andrés Marino's user avatar
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 ...
yanscha's user avatar
-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 ...
Taras's user avatar
  • 1
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 ...
Jobie J's user avatar
  • 107
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 &...
Abdul Basit's user avatar
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 ...
TDMNS's user avatar
  • 281
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 ...
breadlump's user avatar
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-...
asjad's user avatar
  • 1
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" ...
Klei Demiri's user avatar
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. ...
Ariel K.'s user avatar

1
2 3 4 5
886