так это легко сделать, просто меняешь размер при наведении
и gsap не нужен. этот блок абсолютно спозиционирован, просто изменяется высота, либо добавляются отступы, блоки исчезают, никаких асинхронных штучек
Как сделать появление скрытых блоков на то место где они нужны при условии что размер картинки и текста может быть любой?
просто в html у тебя
заранее поставь элементы и скрой, затем просто отображай по последовательности
el:hover { display: none ;}
И где тут будет анимация как в гифке?
@keyframes
дисплей нельзя анимировать, задаёшь анимации, потом можешь отслеживать завершение анимации и показывать
Если даже я сначала сделаю display block, а потом добавлю какой то opacity 1 для анимации то у меня будет рывок блока у которого меняется высота
Можно вынести элементы за пределы блока и двигать к нужному месту. А весь контейнер с контентом overflow: hidden
Как высчитать нужно место?
Вручную меняешь координаты по двум плоскостям, тестируешь
Текст может быть любой длинны и с любым кол-вом строк
Парень, ты слишком зациклен на точности) Ты переходы будешь делать для определённых селекторов, всё будет синхронно, если так нужно будет
Дело не в синхронности а в правильном подходе. Понятное дело что все это можно захардкодить, но я так не хочу.
Опиши подробнее, что ты хочешь видеть
Анимацию как на гифке без костылей и без фикс значений позиционирования. То есть должна быть какая то логика. У меня была идея скрывать элементы через height 0 и анимировать через гсап до height auto и это именно то что я ожидаю. Все элементы на своих местах и ничего не криво. Но ещё нужно увеличивать высоту всего блока и чтобы высота увеличивались одновременно и сверху и снизу. Я это решал тем что двигал элемент на 25% вниз во время увеличения высоты до 800 пх скажем. Просто хотел ещё варианты узнать , потому что это заморочено
Чтобы было без рывков, у этого блока должно быть width: 100%; И анимировать нужно max-height
https://codepen.io/Axiom777/pen/RwxwGpJ - я бы как нибудь так делал
Да, это похоже на мое решение чем то, но если добавить много текста (Больше чем высота блока), то оно вроде багается
Вроде не багается
а да, все окей. Спасибо изучу.
Обсуждают сегодня