Нулевой радиус, GSAP: плавная анимация.

Question

Нулевой радиус, GSAP: плавная анимация.

serega dushka Знаток (393), на голосовании 5 месяцев назад

я взял готовый код и решил сделать изменяемый радиус кольца картинок
На этом все застряло.
Мне самому dполне достаточно DevTools, вот код который изменил .

 // Enlarge gallery 
var сoef = 1; 
var value = 1; 
function enlarge(value) { coef = value; } 
function enlargeFunc(coef) { 
    return function() { 
        enlarge(coef); 
        gsap.timeline().set('.img', { 
            transformOrigin: '50% 50% '+(500 * coef)+'px', 
		z: -(500 * coef), 
		transition: { 
			duration: 2, // Длительность анимации в секундах 
			ease: 'cubic-bezier(0.2, 1, 0.4, 1.5)'       // "power1.out"  'cubic-bezier(.2, 1, .4, 1.5)'	 // Функция облегчения для анимации  
						}   }   ) 
					    }  };			        
document.getElementById('shadow').addEventListener('mouseenter', enlargeFunc(2) ); 
document.getElementById('shadow').addEventListener('mouseleave', enlargeFunc(1) );

Это копия из оригинального кода, снизу эта часть отключена, здесь измененная часть

Идея проста: Призагрузке радиус 500рх, при мышке на тени -- 1000рх, плавно. Это все.

Ring-Gallery
-- результат.

Вопрос: почему в при загрузке страницы очевидно, что переменная coef = 0 , хотя я ей принудительно , где надо и где не надо , вручаю 1.

Вопрос 2 : кто знаком с этой библиотекой GSAP ? Как сделать изменение радиуса плавным ?
И картинку для крастоты.

Answer 1

По первому вопросу - предлагаю вам вставить полный текст вашего скрипта ring-gallery.js на мою страничку, которая подсвечивает русские и английские буквы. Так вы увидите, где вместо английских букв по ошибке вписаны русские:
https://ortega-lab.ru/help/char-highlight.php

Согласитесь, соеф и коеф - разные вещи.

Полагаю, дело в том, что русская "С" предательски размещена на одной клавише с английской "це". По этой причине их легко перепутать, набрав букву в неверной раскладке. Я и сам так путался.