Help with animating and hiding sections on scroll

[mr slowpoke]

Hello!

 

I am new to GSAP and I'm struggling to create this animation. I kinda have the animation down to what I want:

•  I want "section 1" to become smaller and animate so it's hidden behind the sticky "header".
• The logo text should animate so it becomes smaller and "fades" in behind the logo in the "header".
• The animation should start when the user scrolls down.
• I want the "section 1" to be hidden after it has animated so if the user scrolls up again it should not be displayed.

But I have some problems:

• How do I hide "section 1" after it has animated so it doesn't show again when scrolling back up? If I use pin or translateY there is a big white space after "section 1". Cused by the aniamtion placeholders created by GSAP? What am I doing wrong?

I'd appreciate if someone could give me some hints. Thanks!

 

My demo:

See the Pen OJYyGxR by andreasnylin (@andreasnylin) on CodePen

[mvaneijgen]

Hi @mr slowpoke welcome to the forum!

 

I would use the Flip.fit() (https://gsap.com/docs/v3/Plugins/Flip/static.fit()/) function of the Flip plugin, to as the name implies fit the logo inside the other logo. Animating height is always something you want to avoid when animating, because it causes a browser repaint, which is really heavy on the browser a this will never come out right. 

 

I'm not complete sure what it is you want to happen, but what I've done is moved to timeline (timelines are the most powerful tool in GSAP) and add the Flip.fit() animation to that timeline, now now scroll that animation plays and the rest of the page scrolls like normal. Then as soon as the animations finishes the ScrollTrigger kills it self, it sets the pink section to a height of 0 and never played again. To me this seems the best way of handling this particular animation. 

 

Right now I've just place the .logo-text somewhere, but you can fully tweak this with CSS and then Flip.fit() will automagicly animate it to the logo up top. Hope it helps and happy tweening! 

 

See the Pen YzbqWQe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[mr slowpoke]

Thank you @mvaneijgen! That's exactly what I was trying to accomplish!