How to Create Text Animations Similar to this site?

[Shahroz]

Hi,
I want to create text animations similar to the ones on this website:
 

https://yourcodebuddy.dev/

 

I’ve tried inspecting the site but couldn’t figure out how the animations are implemented. It seems like the developer might have built them custom, or I couldn’t detect any animation library using Wappalyzer.

I want to know if it’s possible to achieve similar effects using GSAP. Specifically, how is the text switching between phrases like "website," "mobile app," and others? I’d like to replicate this type of animation for my project.

Could you guide me on how to achieve this?

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[mvaneijgen]

Hi @Shahroz welcome to the forum! 

 

Check out @Carl's amazing stagger tutorial! It not the same effect, but I would just open up a Codepen and start experimenting. You definitely want to check out the SplitText plugin https://gsap.com/docs/v3/Plugins/SplitText/ and if you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening!