Задать вопрос
@deslre

Почему зависает анимация GSAP при работе с REACT?

На веб-сайте есть следующий блок:
67eea721f2b66635572675.png

При нажатии на кнопки, все блоки внутри контейнера должны плавно выезжать. Это реализовано в коде ниже. Но, если часто нажимать на кнопки, то анимация зависает и почти пропадает:
67eea7d99aff5701783204.png

Подскажите, в чём проблема?

function AdvantagesContent() {
	const [selectedCategory, setSelectedCategory] = useState('Покупка')
	const advantagesRef = useRef(null)
	const animationRef = useRef(null)

	const { language, changeLanguage } = useContext(LanguageContext)

	const handleCategoryClick = category => {
		setSelectedCategory(category)
	}

	const ACTUAL_ADVANTAGES = (() => {
		switch (selectedCategory) {
			case 'Покупка':
				return language === 'ru' ? PURCHASES : PURCHASES_EN
			case 'Продажа':
				return language === 'ru' ? SALES : SALES_EN
			case 'Аренда':
				return language === 'ru' ? RENT : RENT_EN
			case 'Управление':
				return language === 'ru' ? MANAGEMENS : MANAGEMENS_EN
			default:
				return language === 'ru' ? PURCHASES : PURCHASES_EN
		}
	})()

	// Анимация появления преимуществ при изменении категории
	useEffect(() => {
		if (animationRef.current) {
			animationRef.current.kill()
			console.log('animationRef')
		}

		animationRef.current = gsap.from(advantagesRef.current, {
			opacity: 0,
			y: -60,
			duration: 1.2,
			stagger: 0,
		})
	}, [selectedCategory])

	return (
		<div id='AdvantagesMenuHook' className='advantagesContent'>
			<div className='description'>
				{language === 'ru' ? 'Наши преимущества' : 'Our competitive advantages'}
			</div>
			<div className='title'>
				{language === 'ru'
					? ['Почему выбирают ', <br />, 'именно нас?']
					: ['What makes us the ', <br />, 'go-to choice?']}
			</div>
			<div className='advantages' ref={advantagesRef}>
				{ACTUAL_ADVANTAGES.map((advantage, index) => (
					<Advantage
						key={index}
						icon={advantage.icon}
						title={advantage.title}
						description={advantage.description}
					/>
				))}
			</div>
			<CategorySelector
				selectedCategory={selectedCategory}
				onCategoryClick={handleCategoryClick}
			/>
		</div>
	)
}
  • Вопрос задан
  • 24 просмотра
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы