question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Problem with starting animation

See original GitHub issue

I think there is some problem.

Problem occurs when I dynamically set the top and left style of some element then if I animate it with anime (the top value), it starts with the wrong value.

here’s my sample code:

<div id="testme" style="
	top: 1px;
	left: 1px;
	width: 100px;
	height: 100px;
	background-color: #000;
	position: fixed;
"></div>

document.getElementById('testme').style.top = '1vh';
anime({
	targets: '#testme',
	delay: 2000,
	top: {
		value: '+=50vh',
		duration: 2000
	}
});

without the anime function, #testme is positioned at the place I want it to be, but with the anime function, the top value was not the same. this only happens both for vh and vw units

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
juliangarniercommented, Jan 9, 2019

Should be fixed in V3.

1reaction
lxsmnsyccommented, Oct 7, 2017

thank you for that response. It will help me solve my anime problem. though still it is weird how it changes the starting position.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Animations Not Working? Try These Fixes - HubSpot Blog
Learn how to fix common CSS animation error and get your animations looking how you want them.
Read more >
5 Reasons You Won't Be an Animator
Not Facing Your Weakpoints in Animation; Ignoring The Importance of Networking; Procrastination/Perfectionism; A Boring Demo Reel; The Wrong Schooling. You very ...
Read more >
Animate crashes on launch or startup - Adobe Support
How to troubleshoot when Animate crashes while configuring the user interface or while loading the splash screen (Windows and Mac OS).
Read more >
6 Major Problems That Animators Deal With
1) COMPETITION is fiercer than before... · 2) The biggest animation studios are OUTSOURCING their work to low-wage countries. · 3) DIY ANIMATION...
Read more >
What NOT to Do as a New Animator | Animation Mentor Blog
So you're about to start an animation job at a new studio. ... And if you find yourself struggling, with an animation problem,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found