Looking for page title animation

[Ali Mohmad]

Hi everyone

 

I’m trying to recreate the title animation no image only title from this website . I’ve already tried using GSAP + SplitText and made some progress, but I’m still not getting the exact wheel-style animation.
https://www.accordion.net.au/about-us

 

If anyone can help me refine the animation or point out what I should change in GSAP/SplitText to match the Accordion website effect more closely, I’d really appreciate it!

See the Pen YPqrELb by Elegant-Coder (@Elegant-Coder) on CodePen.

[mvaneijgen]

Hi @Ali Mohmad welcome to the forum!

 

It looks like the only difference is that your animation has the letters overlap, which looks different. I've restructured your pen a bit how I would set it up. First of I've modified your CSS, to overlap things I much more prefer CSS grid and just stacking everything in the same 'cell', this has the add benefit of everything still being part of the document flow (which you miss if you use absolute) and thus don't have to set some weird height value to the parent based on the font-size! For the rest of the code I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

I've also installed GSDevTools for easier animation debugging now you can really inspect what your animation is doing when. 

Check out this post, might be interesting to give it a read through https://gsap.com/resources/mistakes/

 

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

 

Also checkout our own @Carl's tutorials, there might be some more knowledge you can gleam from them. Hope it helps and happy tweening! 

 

 

[Ali Mohmad]

Thank you so much