Как повторить эффект вращения при наведении на блок?

Question

[Дмитрий]

Добрый день всем.
Хочу повторить эффект вращения градиента или фона с градиентом как на сайте https://vintage.com.ua/services
при наведении на надпись "Давайте обсуждать".
Вращение градиента сделал, но не могу сообразить как сделать плавное затухание вращения и чтоб, фон продолжал вращаться в ту сторону в которую двигалась мышка.
Мои мучения здесь:
https://codepen.io/Odiseu/pen/dyYxxZO

Comments

[Степан Крапивин]

фон продолжал вращаться в ту сторону в которую двигалась мышка

на указанном сайте не вижу такого эффекта

[Арсений Матыцин]

Степан Крапивин, он там есть. Я проверил.

[Степан Крапивин]

Арсений Матыцин, тогда я не понимаю о чём речь. Фон просто появляется и исчезает при наведении курсора.

[Дмитрий]

Степан Крапивин, Когда наводишь на надпись "Давайте обсуждать" появляется фон с градиентом, когда водишь мышкой по этому фону, фон крутиться за мышкой, вращение останавливается с затуханием.

[Арсений Матыцин]

Степан Крапивин, анимация с оттяжкой. Я такое в ранние годы практики делал, но тогда у нас не было animate, обычные циклы и шлейф за мышой. Уже почти и не помню ни черта.

[Степан Крапивин]

Дмитрий, а всё, понял.

[RAX7]

Дмитрий, https://medium.com/@dtinth/spring-animation-in-css...

Answer 1

[Дмитрий]

Кому интересно. Выкладываю ответ на вопрос.
https://jsfiddle.net/Dmytriy_od/xz801v34/3/

Answer 2

[profesor08]

У тебя сейчас происходит моментальная отрисовка позиции градиента при движении мышки. А тебе надо сделать так, чтоб градиент отрисовывался постепенно, стремясь к нужной позиции. То есть ты водишь мышкой, а градиент догоняет. Обычно это делают в requestAnimationFrame, ты можешь ручками написать некоторую функцию, которая будет постепенно менять позицию на N, прибавляя значение к текущей. Но можешь воспользоваться открытой библиотекой для подобных вещей Anime.js.

Придется посмотреть и разбираться, никто не говорил что будет легко.