Как сделать анимации на anime js которая вылетает справа?

Question

[Алексей Гончаров]

Здравствуйте, у меня есть элемент это печенька)) Я задал ему вот такие свойства: translateX: 250 через anime.
Ну все как обычно заработало, печенька анимируется.

Она стоит на месте и потом плавно едит направо, но мне нужно сделать так чтобы она вылетала из правого края. То есть изначально её не видно и она вылетает справо. Как такое сделать с использованием anime.js?

Comments

[Kovalsky]

Человек гугл спешит на помощь

Оф примеры, примеры из интернетов

[Алексей Гончаров]

Kovalsky, в гугле не нашел именно такой анимации которую я хочу. И ваши ссылки не работают

[Kovalsky]

Алексей Гончаров, да, действительно, ссылки погибли. Это были первые две ссылки из гугла по запросу "anime js examples", там много хороших примеров, например официальный - https://codepen.io/collection/XLebem/

[Алексей Гончаров]

Kovalsky, я здесь тоже искал, но не нашел того что хочу. Там нету анимации которой я хочу(

[Kovalsky]

Алексей Гончаров, а там и не должно быть той анимации которую вы хотите. Там есть примеры использования библиотеки, вы на них смотрите и по образу и подобию делаете вашу анимацию

[Алексей Гончаров]

Kovalsky, там просто нету образа подобия вылетания за пределы экрана и из предела экрана)

[Алексей Гончаров]

Kovalsky, а вы сами не знаете каким образом это сделать?

[Kovalsky]

Алексей Гончаров, ну вот например - https://codepen.io/jsonhoward-the-typescripter/pen..., красивая анимация движения объекта. У вас всё то же самое, только объект у вас будет за пределами экрана,

"а вы сами не знаете каким образом это сделать?" - а что конкретно не понятно? Из-за пределов экрана двигаете объект в центр, по ходу дела крутите. Каждая из этих деталей есть в примерах,

[Алексей Гончаров]

Kovalsky, а как его переместить изначально за пределы экрана?

[Алексей Гончаров]

Kovalsky, мне нужно как именно это сделать , на вашем примере там очень много лишнего кода и нет решения как вывести изначально картинка за экран

[Алексей Гончаров]

Kovalsky, я смог найти только один способ но я думаю что он не такой и уж правильный. Я просто задал позицию элементу left 110%, и печенька вылезла за экран. Потом я убрал прокрутку горизонтальную. И поставил translateX на - значение.

Answer 1

[profesor08]

Задай ей translateX: 250, а потом анимируй в translateX: 0