Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with starting animation #251

Closed
lxsmnsyc opened this issue Oct 6, 2017 · 8 comments
Closed

Problem with starting animation #251

lxsmnsyc opened this issue Oct 6, 2017 · 8 comments
Labels

Comments

@lxsmnsyc
Copy link

lxsmnsyc commented Oct 6, 2017

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

@alexchantastic
Copy link
Contributor

You need to tell anime which initial value to animate from using the array syntax.

In your example, it would be something like this: https://codepen.io/alexchantastic/pen/VMQbaZ

@lxsmnsyc
Copy link
Author

lxsmnsyc commented 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.

@lxsmnsyc
Copy link
Author

lxsmnsyc commented Oct 7, 2017

I just learned that the value was just "initial" and "final", will the value accept increment/decrement operators?

@alexchantastic
Copy link
Contributor

Yes, +=, -=, and *= should work in this instance.

However, looking back at your first issue, it might actually be a bug with how anime handles vh units. Specifying a px value in your original example seems to work fine since anime should grab the original computed style.

@lxsmnsyc
Copy link
Author

lxsmnsyc commented Oct 8, 2017

that was my first animation process: get the passed vh and vw unit, convert it into px then pass it to anime. the problem was that the elements aren't responsive ( I was trying to retain its "responsive-ness")

@mikicho
Copy link

mikicho commented May 3, 2018

It's mandatory to set inline style for transforms if the start value is not the default?
https://jsfiddle.net/ad1o7fdn/3/

OPTIONAL SOLUTION:
Its possible to set initial value: http://animejs.com/documentation/#specificInitialValue

@juliangarnier
Copy link
Owner

Should be fixed in V3.

@lxsmnsyc
Copy link
Author

Oh my, thanks Julian for noticing my issue!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants