Splash Screen - Reveal Website Name and Logo - Animation With GSAP

[Miyy]

Hello, everyone! I’m super new to GSAP and have been trying to recreate this animation for days. I’ve even tried using Claude and ChatGPT, but the results are still not close to what’s in the GIF. Here’s the reference site: https://icggallery.irisceramicagroup.com/en 
I’m really confused and could use some help. If I at least knew the name of this animation, I could probably find some example code and learn from it—but it seems like there’s nothing like it anywhere!

[Rodrigo]

Hi @Miyy and welcome to the GSAP Forums!

 

I'd use Flex and overflow hidden with a simple loop, then using a single Timeline and the position parameter with a stagger value you can get something like this:

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

 

You can learn more about staggers here:

https://gsap.com/resources/getting-started/Staggers

 

Also if you are getting started @Carl has great learning resources here:

https://www.creativecodingclub.com/bundles/creative-coding-club

 

He even has a FREE course to get you started!

https://www.creativecodingclub.com/courses/FreeGSAP3Express

 

Be sure to follow him on Twitter (X) and Youtube where he's always posting fun and amazing stuff!

 

Hopefully this helps

Happy Tweening!

[Miyy]

Thank you so much @

Rodrigo. Your solution is so clear. I am appreciated for your help! God bless you! 

7 hours ago, Rodrigo said:

Hi @Miyy and welcome to the GSAP Forums!

 

I'd use Flex and overflow hidden with a simple loop, then using a single Timeline and the position parameter with a stagger value you can get something like this:

 

 

 

You can learn more about staggers here:

https://gsap.com/resources/getting-started/Staggers

 

Also if you are getting started @Carl has great learning resources here:

https://www.creativecodingclub.com/bundles/creative-coding-club

 

He even has a FREE course to get you started!

https://www.creativecodingclub.com/courses/FreeGSAP3Express

 

Be sure to follow him on Twitter (X) and Youtube where he's always posting fun and amazing stuff!

 

Hopefully this helps

Happy Tweening!