How to make animation effect of words?

Pinegrow Interactions Add-on
1

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.

2

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
image982×460 25.6 KB

Does this do what you want?
Cheers,
Bob

3

Thanks, RobM.
I solved it.

4

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

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

Thanks

5

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

1 Like
6

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.

7

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.