Вопросы с меткой [gsap]
Ещё никто не добавил руководство по использованию для метки gsap, но есть описание этой метки.
37
вопросов
0
голосов
1
ответ
9
показов
gsap не видит в react компоненте классы
Пробовал дать дом дерево через useRef, но на это он отвечал ошибками и не проигрывал анимацию.
Буду очень признателен если расскажите в чем моя ошибка. Заранее спасибо
const dom = useRef(null)
gsap....
0
голосов
0
ответов
14
показов
Поместить картинку в блок динамического слайдера с помощью JS
Всем добра. Столкнулся с проблемой связанной с незнанием JS. Взял готовый слайдер codepen - https://codepen.io/creativeocean/pen/mdROBXx
let xPos = 0;
const images = [
"https://купитьпнд.рф/id/...
0
голосов
1
ответ
28
показов
GSAP ScrollTrigger - как сделать плавную анимацию clip-path?
Реализация в CodePen
В данном примере реализована анимация через последовательное изменения свойства "clip-path"
Но почему-то между состояниями нет плавного перехода. Как сделать анимацию ...
0
голосов
1
ответ
10
показов
GSAP MotionPath - движение по path не той стороной
Пример в CodePen
Есть объект ".main__rect", который двигается по траектории (path)
При активации свойства "autoRotate", объект должен поворачиваться вслед за кривизной path
Но ...
0
голосов
0
ответов
9
показов
Как добавить gsap в gulp?
Подскажите как правильно добавить gsap и именно scrolltrigger в gulp?
Вот моя сборка
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const watch = require('gulp-...
3
голоса
1
ответ
41
показ
angular, gsap.from ScrollTriger срабатывает через раз
https://mihinov.github.io/ng-gsap-scroll/ - деплой проекта
https://github.com/mihinov/ng-gsap-scroll - код проекта
Пытаюсь разобраться, почему у меня не работает gsap.from
Иногда, я обновляю страницу ...
0
голосов
1
ответ
29
показов
Как сделать, чтобы при нажатии на элементы с одинаковыми классами-выбирался первый элемент
Всем привет. Я захотел сделать карточную и сразу столкнулся с проблемой. У меня есть блок из карт, хочу с помощью библиотеки GSAP сделать анимацию для сдвига вправо. Я обернул анимацию в функцию. В ...
2
голоса
1
ответ
27
показов
Как убрать лишнею надпись?
Нашел код для медленного скролла ( ScrollMagic ), начал его разбирать и заметил, что на экране появляется надпись - trigger 1. Как её можно убрать ?
код - тут
Возможно в самой сцене надо что-то ...
0
голосов
2
ответа
66
показов
Не работает управление слайдером GSAP
Приветствую и с праздниками!!!!
В общем получилось сделать корректно работающий слайдер, который меняет сюжеты как надо и не тормозит при выходе в другую вкладку. Встала задача управлять ...
0
голосов
0
ответов
27
показов
Страница перезагружается 2 раза при добавлении свойства pin в gsap
Я использую js библиотеку GSAP для анимирования открытия ноутбука на своей странице.
Была задача "не скролить экран пока анимация не закончится" - И я использовал свойство pin: true и моя ...
0
голосов
1
ответ
62
показа
Выполнить анимацию в обратном порядке
Есть страница с анимацией, по клику на бургер элементы меню появляются одним за другим, по клику на "крестик" элементы должны "пропадать" в обратном порядке, то есть анимация ...
0
голосов
0
ответов
21
показ
Как двигать блок в месте со скроллом и потом закрасить буквы?
Как двигать блок app-text вместе со скроллом и остановить этот блок когда он попадает в about-title и когда с темного фона переходит на белый закрашивать текст app-text в черный
Думал поможет Gsap но ...
1
голос
1
ответ
78
показов
Можете подсказать, где ошибка в данном коде? Почему не работает данная анимация? GSAP JS
Я пишу анимацию.
При наведение на ссылку, она начинает двигаться за курсором. Я научился отслеживать курсор, но почему-то при наведение элемент ничего не происходит хотелось бы узнать почему.(Элемент ...
0
голосов
0
ответов
31
показ
скролл правой части страни
у секции, высотой в 100vh нужно сделать скролл правой части секции.
я использовал gsap, но видимо - неправильно.
1
голос
2
ответа
86
показов
Как нарисовать и анимировать реальное небо с облаками?
На создание этого вопроса меня вдохновил вопрос - ответ участника @Alexandr_TT, где он нарисовал простое мультипликационное облако с использованием технологии SVG.
Вот предлагаю посмотреть похожую ...
1
голос
2
ответа
66
показов
Как нарисовать и анимировать спичку?
Меня заинтересовала работа участника @Qwertiy♦, где он нарисовал спичку с использованием технологии CSS.
Вот его ответ на вопрос Как нарисовать спичку на CSS не изменяя HTML:
html {
font-size: ....
4
голоса
1
ответ
631
показ
Бум! Как нарисовать и анимировать бомбу?
У меня есть такой код:
/*Бомба*/
.bomb {
position: absolute;
bottom: 0;
right: 7%;
width: 15%;
height: 0;
padding-top: 15%;
border-radius: 100%;
background-color: #222;
}
/*...
3
голоса
1
ответ
48
показов
Как нарисовать и анимировать поезд?
Меня заинтересовала работа участника @Arthur, где он нарисовал и анимировал движение поезда с использованием технологии SVG.
Вот его ответ на вопрос Движение поезда с помощью SVG:
* {
margin: 0;
...
3
голоса
2
ответа
114
показов
Как нарисовать и анимировать Деда Мороза?
Меня заинтересовала конкурсная работа участника @OPTIMUS PRIME, где он нарисовал и анимировал Деда Мороза с помощью элемента canvas.
Вот его конкурсный ответ в теме Новогодний конкурс 2021 года!:
"...
1
голос
1
ответ
55
показов
gsap скрытие блоков z-index или visiblity: hidden
Сделал анимацию с помощью gsap
Но когда блоки заканчивают анимацию, их можно выделить, пробовал в timeline прописать visibility: hidden, или Zindex: -10, но не работает почему-то.
Я хочу сделать так, ...
2
голоса
1
ответ
60
показов
Анимация проходит быстрее чем заданное время
Пробую GSAP.
Подскажите,пожалуйста, почему у меня анимация заканчивается быстрее, чем указанное время продолжительности анимации.
Рисование лого заканчивается на 4 секунде, а время анимации стоит 10 ...
1
голос
1
ответ
97
показов
Не плавная анимация при прокрутке
Столкнулся с небольшой проблемой, при скролле картинка перемещается не плавно. Использовал для анимации GSAP & ScrollMagic. Как можно сделать эту анимацию более плавной?
CodePen: https://codepen....
5
голосов
1
ответ
900
показов
Как нарисовать и анимировать символ (знак) российского рубля [закрыт]
У меня есть символ (знак) российского рубля: ₽ (₽)
Знак российского рубля представляет собой букву «Р», состоящую из двух элементов, с горизонтальной чертой. Как создать эффект анимации для ...
26
голосов
12
ответов
3k
показов
Как анимировать слово StackOverflow
У меня есть слово StackOverflow:
<h1>StackOverflow</h1>
Как создать эффект анимации для этого слова, например, в виде волны и одновременно переливания одного цвета в другой?
Я ...
11
голосов
2
ответа
290
показов
Как нарисовать объемную картинку линиями и анимировать её?
Как нарисовать объемную картинку линиями и добавить легкую анимацию в виде, например, изменения расстояния между полосками, чтобы получить эффект "движения", типа оживить картинку?
0
голосов
1
ответ
130
показов
Анимация в three js
Недавно начал изучать three js и столкнулся с такой проблемой, как анимирование 3д объектов.
Коротко говоря, мне нужно, чтобы 3д объекты одновременно меняли позицию и opacity. Пытался сделать через ...
2
голоса
0
ответов
50
показов
Почему не работают мягкие переходы страниц (barba)?
Я подключил barba js(второй версии) и gsap через cdn:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://unpkg.com/@barba/...
0
голосов
1
ответ
64
показа
Почему не импортируется gsap?
Я установил gsap через npm:
npm install gsap
Потом захотел импортнуть его в проект:
import { TimelineMax } from 'gsap'
const tl = new TimelineMax();
tl.to("img", 0.5, {opacity: 1});
Но в ...
2
голоса
2
ответа
183
показа
Vue JS | Mouse cursor magnet, эффект магнитизма при наведении
Не получается создать эффект примагничивания, пытался завести эффект от сюда, не венчалось успехом
Ссылка на рабочий результат. |
Ссылка на второй рабочий результат.
Ссылка на мой результат. (код на ...
0
голосов
1
ответ
59
показов
ScrollMagic не может работать с GSAP?
Всем привет, я пытаюсь научиться анимации по скроллу и хочу попробовать для этого ScrollMagic совместно с GSAP, но у меня не получается даже скомпилировать свой файл. Я использую laravel.mix для ...
4
голоса
1
ответ
137
показов
анимация не работает в хроме
есть такая конструкция
<object id="logotop" data="images/logo10.svg" type="image/svg+xml"></object>
к ней написан такой код:
window.onload = function() {
var logotop = document....
0
голосов
1
ответ
46
показов
Как запускать анимацию при каждому активному слайдере
Код для анимации с использованием gsap есть следующий код
$('polygon').each(function() {
var minY = -600;
var maxY = 0;
var minX = -600;
var maxX = ...
0
голосов
0
ответов
188
показов
Не работает плавное изменение графики TweenMax при переключении между сценами
У меня проблема с настройкой TweenMax (TweenLite) под не совсем нормальную задачу.
Требуется сделать шесть слайдов анимации. Проблема в том, что вся анимация должна происходить внутри одного окна и с ...
4
голоса
0
ответов
97
показов
Из GSAP в WEBGL
Есть приложение в ангуляре, которое использует GSAP анимацию. Оно меняет svg с помощью timeline, а точнее, Есть один SVG и внутри него много <g> и они анимируются с помощью display:none-block. ...
1
голос
1
ответ
135
показов
Начало анимации при достижении элемента в поле зрения при скролле
Использую GreenSock.
Как сделать в данном примере так, чтобы анимация выполнялась только тогда, когда я дойду до блока?
<!DOCTYPE html>
<html lang="en">
<head>
<meta ...
0
голосов
0
ответов
25
показов
Некорректно работает функция в цикле
Вместо того чтобы анимация действовала на определенный блок,она действует на все блоки. Как это исправить?
<div class="grid">
<img src="http://www.tsstrade.ru/img_out/gallery_elements/...
1
голос
0
ответов
24
показа
Создание последовательных закладок при скролле часть 2
На данный момент реализован функцинал, который при скролле добавляет/убирает закладки title'ов. Всё правильно. Также использую библиотеку tweenmax, для создания анимации необходимых элементов. Но ...