Как поменять цвет анимационного шарика?

Question

[HelpMeeee]

Есть код - https://codepen.io/ELCHIN1/pen/JjRNbeW
Там анимация, 6 шариков, если на них наводить появляется черный шарик и катается между ними. Ему нужно задать такой цвет - #f7e0d7, но если его задать то анимация пропадает...
Что делать?

Comments

[Froggyweb]

ничего не пропадает пример конечно очень крутой.
для копипаста замени в CSS #000 на #f7e0d7

[Антон]

кмк, медленная скорость перемещения

[Антон Литвиненко]

Хексус!

[HelpMeeee]

Froggyweb, Заменил, анимация пропала

[HelpMeeee]

Froggyweb, Если у тебя работает, когда цвет меняешь - можешь кинуть плиз скрин?

[Froggyweb]

HelpMeeee,

section {
	padding: 0;
	margin: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
  
}
.pagination ul {
	padding: 10px 30px;
	font-size: 0;
}
.pagination li {
	display: inline-block;
	margin: 30px;
  flex:25%;
  background: #b1d0cd;
	width: 220px;
	height: 220px;
  border-radius: 50%;
  transition:1500ms;
}
.pagination li:hover{
  background: #f7e0d7;
}
.pagination li:hover button h1{
  color: #006c67;
}
.pagination li:hover button p{
  color: #706f6f;
}
.pagination .dots {
	position: absolute;
	z-index: 1;
	background-color: white;
	-webkit-filter: blur(15px) contrast(75);
}
.pagination .dots .select {
	position: absolute;
	left: -20px;
	top: -10px;
	width: 200px;
	height: 200px;
	background: red;
}
.pagination .dots .dot {
	background-color: red;
  filter: blur(15px);
}
.pagination .buttons {
	position: relative;
	z-index: 2;
}
.pagination .buttons .button button {
	width: 100%;
	height: 100%;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background-color: transparent;
	border: 0;
	cursor: pointer;
	outline: none;
}
.pagination .buttons .button button h1{
  font-family: sans-serif;
  transition:1s;
  font-size:28px;
}
.pagination .buttons .button button p{
  font-family: Roboto;
  transition:1s;
  font-size:22px;
}

Answer 1

[Максим]

.pagination .dots .select{
  background: нужный цвет
}

https://codepen.io/topicstarter/pen/XWjgZQb

А вообще goo эффект просто делается, применяется фильтр SVG в котором всего две опции, гаусиан блюр + матрица цветов со смещением ...после чего применяем к нужному месту - как в моём примере - смотрите



Вот к примеру goo эффект вообще без всякого SVG фильтра - смотрите



Пример как у вас без всякого gsap

Comments

[HelpMeeee]

Изменяю код даже в Вашем код опене и этот шарик пропадает...

[Максим]

HelpMeeee, вы код покажите, как изменяете и что пишите, сохраните и покажите

Answer 2

[RAX7]

https://css-tricks.com/gooey-effect/

Answer 3

[ettaluni]

Цвет там 256 бит наверное, только три символа и цифры