Вопросы с меткой [anime.js]

Руководство по использованию метки отсутствует.

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
23 показа

Разбить анимацию на шаги

В компоненте у меня есть анимация, по пути свг рисуется линия. Она разбита на несколько шагов, с этим все хорошо, работает норм. const path_length = anime.setDashoffset(svgPath); ...
Mo J's user avatar
  • 27
1 голос
1 ответ
239 показов

Anime.js - элементы анимации с различной продолжительностью

Имеется html-элемент, который нужно бесконечно вращать, но передвинуть только 1 раз. Пытаюсь сделать с помощью вызова anime.js 2 раза. В таком варианте не работает смещение, но работает вращение. ...
RU Dremin's user avatar
0 голосов
0 ответов
23 показа

Наплывание нового контента в div

Необходимо чтобы при клике в блоке наплывало сверху новое содержимое с текстом "Generating", а затем контент с текстом "Done" и возврат к исходному состоянию. Я попробовал изменять ...
Dmitry's user avatar
  • 63
4 голоса
1 ответ
36 показов

Как избежать искажения пути svg при transition морфинга svg?

У меня есть следующий SVG, созданный в inkscape <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg xmlns:dc="...
Alexandr_TT's user avatar
0 голосов
1 ответ
29 показов

Как по очереди вызывать значение массива по клику?

Нужно по клику на каждую кнопку, присваивать для anime: easing: easingNames[e]. То-есть нужно что бы на каждую кнопку, вызывался элемент по очереди. https://jsfiddle.net/p0ghrzL7/13/ <div class=&...
Qver's user avatar
  • 21
0 голосов
0 ответов
34 показа

AnimeJS path animate

Я анимирую движение блока по кругу с помощью animejs let a = anime.path('svg circle') let b = anime({ targets: 'p', translateX: a('x'), translateY: a('y'), easing: 'linear', duration: ...
Яков Будников's user avatar
0 голосов
1 ответ
50 показов

animejs float numbers

Я пытаюсь анимировать заполнение числа от 0.00 до 100.00% с помощью anime.js но когда число анимируется после запятой появляется слишком много символов Так как ниже let text = document....
DiZeR TiR's user avatar
1 голос
1 ответ
967 показов

Изменение текста как анимация в HTML через JS

Проблема: Есть текст, который нужно изменить, желательно через цикл. Пытаюсь сделать эффект написания. Есть строка, и мне нужно сделать так, что бы на место значения слова, подставилась первая буква ...
ioriSempai's user avatar
1 голос
3 ответа
537 показов

Каким боком подключить один файл js в другой?

Начал с недавнего времени работать с библиотеки anime.js, но я не хочу засорять код html поэтому хочу созать файл mine.js подключить туда anime.min.js и потом в html просто подключить файл: <...
Maxproger's user avatar
2 голоса
1 ответ
53 показа

CSS / SVG / Animation: Как применить transform origin к одному элементу в SVG

Я хочу анимировать определенные части (полигоны) SVG, используя animejs. Например, я хочу, чтобы каждый отдельный многоугольник вращался вокруг своего центра или увеличивался от 0,1 до 1,0. ...
Alexandr_TT's user avatar
3 голоса
1 ответ
90 показов

Anime.js SVG заполняет цветной анимацией фигуру при загрузке веб-страницы

В основном я хочу создать SVG-анимацию на основе библиотеки Джулиана Гарнье anime.js. Библиотека отлично работает с цветом обводки, но я хочу анимировать и цвет заливки SVG. Здесь я сохранил ...
Alexandr_TT's user avatar
1 голос
1 ответ
43 показа

Почему не срабатывает второе условие?

Делаю анимацию на anime.js и я хочу получить эффект как при наведении так и при scroll. При scroll вниз овал снизу должен появиться а при скоолле вверх пропасть это получается кроме второго условия - ...
Резидент Казахстана's user avatar
2 голоса
4 ответа
894 показа

Анимация SVG и anime.js

Увидел такую интересную анимацию в библиотеке animejs.com. Так понял, что каждая буква описана в: <path class="el" d="M58 80V50.12C57.7 41.6 51.14 35 43 35a15 15 0 0 0 0 30h7.5v15H43a30 30 0 1 1 ...
qwerty's user avatar
  • 3,957
1 голос
0 ответов
67 показов

Останавливается анимация когда вкладка со страницей переключена anime.js

простейшая анимация, например, anime({ targets: '.element', rotate: 5000, duration: 5000, easing: 'cubicBezier(0.15, 0.15, 0, 1)' }); Так когда она запускается если вкладку в браузере ...
Vadim Samoilov's user avatar
2 голоса
2 ответа
165 показов

При анимации с помощью anime js, SVG path трансформируется не плавно

Я пытаюсь создать простую SVG-анимацию морфинга с использованием Anime JS, но SVG не плавно переходит, как вы можете видеть ниже, он скачет. Кто-нибудь знает, почему это происходит? const ...
Alexandr_TT's user avatar
2 голоса
1 ответ
145 показов

Не работает параметр loop внутри timeline. Использую Anime.js и Vue

Пытаюсь научиться пользоваться AnimeJS Не понимаю, как сделать таймлайн, в котором будет повторятся только отдельный промежуток. Код: leave: function (el, done) { var showLeave = anime.timeline({ ...
Ira G's user avatar
  • 126