# How to make animation effect of words?

**URL:** <https://forum.pinegrow.com/t/how-to-make-animation-effect-of-words/6320>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [February 25, 2022, 3:01am UTC](https://forum.pinegrow.com/t/how-to-make-animation-effect-of-words/6320 "2022-02-25T03:01:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexseo](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alexseo](https://forum.pinegrow.com/u/alexseo)\
**Post date:** [February 25, 2022, 3:01am UTC](https://forum.pinegrow.com/t/how-to-make-animation-effect-of-words/6320/1 "2022-02-25T03:01:54Z")

</div>

How to make animation effect of words ?  
In a website, there is an animation effect that words move from down to up or from up to down.

How to make it in pinegrow?  
Thanks.

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [February 25, 2022, 11:18am UTC](https://forum.pinegrow.com/t/how-to-make-animation-effect-of-words/6320/2 "2022-02-25T11:18:32Z")

</div>

Hi @alexseo,  
Do you mean the whole selected text element moves, or letter by letter?  
For example, you can select an h1 element and apply a ‘fadeInDown’

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/44edc1a7124dbb70c3731bce0b12ccbaf0bf1da5.png)  
Does this do what you want?  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![alexseo](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@alexseo](https://forum.pinegrow.com/u/alexseo)\
**Post date:** [February 27, 2022, 2:27am UTC](https://forum.pinegrow.com/t/how-to-make-animation-effect-of-words/6320/3 "2022-02-27T02:27:39Z")

</div>

Thanks, RobM.  
I solved it.

---

<div class="post-metadata">

**Author:** ![ai\_slop](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@ai\_slop](https://forum.pinegrow.com/u/ai_slop)\
**Post date:** [November 26, 2025, 6:08pm UTC](https://forum.pinegrow.com/t/how-to-make-animation-effect-of-words/6320/4 "2025-11-26T18:08:29Z")

</div>

Hey, sorry to bump an old thread. In the case of a letter by letter reveal, what animation settings would you recommend? Or is it more efficient for page load times to add CSS manually?  
This is the type of animation I mean, but I’d only like this to reveal when scrolling to a specific section of the page (like a scroll observer effect, I guess): [https://www.youtube.com/watch?v=yefgBA1CecI](https://www.youtube.com/watch?v=yefgBA1CecI)

There is a gsoc animation here also that’s a bit more advanced. New to Pinegrow and curious as to whether this type of animation is easier to achieve with Interactions or not: [https://www.youtube.com/watch?v=IBf3naDvf2A](https://www.youtube.com/watch?v=IBf3naDvf2A)

Thanks

---

<div class="post-metadata">

**Author:** ![PeteSharp](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/petesharp/32/7134_2.png) [@PeteSharp](https://forum.pinegrow.com/u/PeteSharp)\
**Post date:** [November 28, 2025, 6:14am UTC](https://forum.pinegrow.com/t/how-to-make-animation-effect-of-words/6320/5 "2025-11-28T06:14:37Z")

</div>

GSAP does have a plugin called SplitText that will enable you to do letter by letter.

---

<div class="post-metadata">

**Author:** ![ai\_slop](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@ai\_slop](https://forum.pinegrow.com/u/ai_slop)\
**Post date:** [November 28, 2025, 6:29am UTC](https://forum.pinegrow.com/t/how-to-make-animation-effect-of-words/6320/6 "2025-11-28T06:29:42Z")

</div>

Hi, thanks Pete. I used that in the end. New to web dev here…just wondering if I’m unnecessarily increasing page load by adding gsap again as a link tag, given that Pinegrow is presumably integrating their own version of gsap for interactions?

It would be cool if I could at least use Pinegrow to trigger my own javascript animations with interactions scroll-timeline so things are managed from one place.

---

<div class="post-metadata">

**Author:** ![PeteSharp](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/petesharp/32/7134_2.png) [@PeteSharp](https://forum.pinegrow.com/u/PeteSharp)\
**Post date:** [November 28, 2025, 6:37am UTC](https://forum.pinegrow.com/t/how-to-make-animation-effect-of-words/6320/7 "2025-11-28T06:37:46Z")

</div>

Your question got me thinking actually about adding the GSAP plugins, considering it’s all free now with GSAP. I have never done it. I haven’t checked the forum either lol.
