Poylar Posted March 9, 2022 Share Posted March 9, 2022 Many browsers recommend only animating transform and opacity. So how can I do something similar to the GIF? Interested only animation block height. I should note that there are several such blocks in a row and they are all in the swiper. I ask for any advice or maybe someone has an example. Thanks. https://gyazo.com/5e67ca35d6665e878cc46a435298b162 Link to comment Share on other sites More sharing options...
OSUblake Posted March 9, 2022 Share Posted March 9, 2022 (edited) Hi Poylar, 5 hours ago, Poylar said: Many browsers recommend only animating transform and opacity. Recommended is not reality. Some stuff just can't be animated with transforms and opacity alone. Even Google, who does a lot of these recommendations, animates height in the People also ask section when you do a Google search. I'm sure if you get creative enough you can do that animation with only transforms and opacity, but it will require some thought as you have to do a bunch of counter scaling to prevent child elements from being distorted. Probably not worth it in my opinion. I would worry about getting the animation working first in the most obvious way, and then if you notice performance issue, I would try to optimize it more with transforms. See the Pen xYMeKP by osublake (@osublake) on CodePen Edited March 9, 2022 by OSUblake 4 Link to comment Share on other sites More sharing options...
Poylar Posted March 10, 2022 Author Share Posted March 10, 2022 10 hours ago, OSUblake said: Привет Пойлар, Рекомендуемое не является реальностью. Некоторые вещи просто невозможно анимировать только с помощью преобразований и непрозрачности. Даже Google, который дает много таких рекомендаций, анимирует высоту в разделе « Люди также спрашивают », когда вы выполняете поиск в Google. Я уверен, что если вы достаточно креативны, вы можете сделать эту анимацию только с преобразованиями и непрозрачностью, но это потребует некоторых размышлений, так как вам нужно выполнить кучу масштабирования счетчика, чтобы предотвратить искажение дочерних элементов. Наверное, на мой взгляд, не стоит. Я бы сначала побеспокоился о том, чтобы анимация работала наиболее очевидным образом, а затем, если вы заметите проблемы с производительностью, я бы попытался оптимизировать ее с помощью преобразований. Thank you for your answer. So you suggest me to animate the height, because it's easier. So what's the next step? Do I need to set a fixed height? Or how would you do it? Link to comment Share on other sites More sharing options...
OSUblake Posted March 10, 2022 Share Posted March 10, 2022 2 hours ago, Poylar said: So what's the next step? Do I need to set a fixed height? Have you used GSAP before? If not, I would suggest going through our Getting Started article. After that, try to work it out, and if you need help, provide minimal demo and we can point you in the right direction. 1 Link to comment Share on other sites More sharing options...
Poylar Posted March 10, 2022 Author Share Posted March 10, 2022 1 hour ago, OSUblake said: Вы использовали GSAP раньше? Если нет, я бы посоветовал ознакомиться с нашей статьей «Начало работы ». После этого попробуйте разобраться, и если вам нужна помощь, предоставьте минимальную демонстрацию , и мы сможем указать вам правильное направление. yes i used. i mean if i set fixed height to elem this is not adaptive, Link to comment Share on other sites More sharing options...
Poylar Posted March 10, 2022 Author Share Posted March 10, 2022 I don't know where to start because I want the height to adjust to the content. I can calculate the height of the hidden elements and increase the height based on them, but I also need the height to increase from the center and not from the bottom or top. + Also, because of this decision, you will have to initially set the minimum height. Link to comment Share on other sites More sharing options...
mikel Posted March 10, 2022 Share Posted March 10, 2022 Hey @Poylar, There are many paths that lead to the goal. Just try something out and show us it in a small CodePen. A small case says more than a thousand words. And I totally agree with Blake: I would suggest going through our Getting Started article. See the Pen VwrozKE??editors=0100 by mikeK (@mikeK) on CodePen Happy starting a CodePen ... Mikel 1 Link to comment Share on other sites More sharing options...
OSUblake Posted March 10, 2022 Share Posted March 10, 2022 You could probably do a lot this by using the Flip plugin and just toggle a class. Check out the demos linked in the docs. https://greensock.com/docs/v3/Plugins/Flip 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now