make elemtents smoothly appear

[archimedo]

Hi everyone,

I'm making a website portfolio and I'd like to animate it with GSAP. In the codepen above there's the progress of my work, another user helped me to figure out how to animate the divs when opening an element. The thing is that I'd like the content of the page (when a project is opened) to smoothly appear, instead of coming into view suddnenly. I made a simple sketch to explain how I imagine this animation.

Can you help me understand how to achieve that?

Thank you very much!

See the Pen rNLMdgd by archemede (@archemede) on CodePen

[ZachSaucier]

Hey archimedo. I see that you're currently toggling a class that affects the display of the child content. What you should also be doing (in addition to changing the display) is animating the opacity or autoAlpha of the content. A .from() tween would likely be helpful here so it ends up at the "normal" values. 

 

Unfortunately we don't have the capacity to help you out with your entire project - that's why we request that people provide minimal demos of their issue where only the code relevant to the question being asked is provided.

 

I do think that these resources would be of great value to you though:

• The most common GSAP mistakes
• Tips for writing animation code efficiently

Happy tweening!