Jump to content
Search Community

How i can do this with gsap?

Poylar test
Moderator Tag

Recommended Posts

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 by OSUblake
  • Like 4
Link to comment
Share on other sites

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

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

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

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

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...