Help Needed: Implementing Forgge Studio-style Logo Animation but with Splash Screen

[ikshwaku]

What I'm Trying to Achieve

I'm trying to recreate an animation similar to Forgge Studio's website, but with a splash screen approach. Here's the sequence I want:

• Show splash screen with centered logo
• Fade in logo with scale animation
• Show scroll indicator at bottom
• When user scrolls, animate the logo to shrink and move to top-left header position
• Fade out splash screen and spacer

On normal navigation:

• Skip splash screen animation
• Show normal header immediately

 

Issues I'm Facing

1. The logo animation doesn't smoothly transition from center to header position
2. Sometimes the splash screen doesn't properly fade out
3. Having trouble detecting hard refresh vs normal navigation
4. The scroll trigger animation feels jumpy

Questions

1. What's the best way to handle the logo transition animation?
2. How can I properly calculate the final position for the logo?
3. What's the recommended approach for managing different navigation scenarios?
4. Any tips for making the scroll-triggered animation smoother?

Thanks in advance for any help or guidance!

 

Current Implementation:

 

 

(PS: The original logo images are replaced with text)

 

See the Pen gbYKVbL by adhikari-dikshant (@adhikari-dikshant) on CodePen.

[mvaneijgen]

16 minutes ago, ikshwaku said:

• What's the best way to handle the logo transition animation?

Check out the Flip plugin https://gsap.com/docs/v3/Plugins/Flip/

 

16 minutes ago, ikshwaku said:

• How can I properly calculate the final position for the logo?

Using the Flip plugin will make it so that this does all the heavy lifting for you. 

 

17 minutes ago, ikshwaku said:

• What's the recommended approach for managing different navigation scenarios?

Just some variables and only create the animation if your variables are met. 

18 minutes ago, ikshwaku said:

1. Any tips for making the scroll-triggered animation smoother?

Check out our ScrollSmoother plugin https://gsap.com/docs/v3/Plugins/ScrollSmoother/ it works out of the box with all the GSAP plugins. 

 

At the moment you seem to do a lot of heavy lifting inside the onUpdate of a ScrollTrigger, it is much better to just create an animation and then have ScrollTrigger control that animation, also keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
 

Hope it helps and happy tweening! 

 

[Rodrigo]

Hi,

 

This demo can come in handy:

See the Pen ExqXdBx by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[ikshwaku]

Hey @mvaneijgen @Rodrigo,

Sorry for the super late reply! I’ve been caught up with exams lately and couldn’t get back sooner.

I just wanted to say a huge thank you for all the help. The Flip plugin suggestion was a lifesaver—it made handling the logo transition so much easier. Also @Rodrigo, the code snippet you shared cleared up a lot of my doubts, especially around controlling animation progress with ScrollTrigger.

I couldn’t use ScrollSmoother since it’s a paid plugin, but I ended up using Lenis for smooth scrolling, and it’s working pretty well with everything else.

Also, your advice about focusing on the animation first and adding ScrollTrigger later? Absolute gold. It made everything so much easier to debug.

Thanks again for all the tips and guidance—it’s been a massive help! 😊