Jump to content
Search Community

Animating word by word using gsap

Kutomba test
Moderator Tag

Recommended Posts

Hey Kutomba. I'm not aware of a demo that does that specific effect though there are many that are similar. However it's trivial to rewrite that anime code in GSAP:

gsap.timeline({repeat: -1})
.from('.ml15 .word', {
  scale: 14,
  opacity: 0,
  ease: "circ",
  duration: 0.8,
  stagger: 0.8
})
.to('.ml15', {
  opacity: 0,
  easing: "power3",
  duration: 1,
  stagger: 1
});

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

34 minutes ago, ZachSaucier said:

Hey Kutomba. I'm not aware of a demo that does that specific effect though there are many that are similar. However it's trivial to rewrite that anime code in GSAP:


gsap.timeline({repeat: -1})
.from('.ml15 .word', {
  scale: 14,
  opacity: 0,
  ease: "circ",
  duration: 0.8,
  stagger: 0.8
})
.to('.ml15', {
  opacity: 0,
  easing: "power3",
  duration: 1,
  stagger: 1
});

 

Hi Zach, thanks for the example

so if I have just one span with a text eg 'Welcome to the jungle'  and I want the same effect what do I need to change?

here is the code demo 

See the Pen PoNzxgV by makumba (@makumba) on CodePen

 

Thanks

Kutomba

Link to comment
Share on other sites

1 minute ago, Kutomba said:

if I have just one span with a text eg 'Welcome to the jungle'  and I want the same effect what do I need to change?

You'd need to set up the HTML similar to the anime demo you linked to (especially putting spans around each word or use SplitText to do that for you), apply similar CSS, and then animate the words similarly.  

Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

You'd need to set up the HTML similar to the anime demo you linked to (especially putting spans around each word or use SplitText to do that for you), apply similar CSS, and then animate the words similarly.  

 

 

problem is I would like a user to insert text as he/she wants , doing the same as anime won't  work (as for my understanding(newbie) , assume a user inserts a text like this

 

<h1>You'd need to set up the HTML similar to the anime demo you linked<h2>

thanks

Kutomba

Link to comment
Share on other sites

23 minutes ago, ZachSaucier said:

You'd need to set up the HTML similar to the anime demo you linked to (especially putting spans around each word or use SplitText to do that for you), apply similar CSS, and then animate the words similarly.  

ok, thanks I will try 

Link to comment
Share on other sites

25 minutes ago, ZachSaucier said:

That's a perfect use case for SplitText. It can split things dynamically! 

 

Add an event listener for the text input (or on the blur event if you prefer), revert any previous splits that happened, split the text by word, then do the animation as necessary. The SplitText docs can get you started.

Here with splittext, but this split each char instead of word to word as I want , 

See the Pen PoNzxgV by makumba (@makumba) on CodePen

  

Link to comment
Share on other sites

That's because you're selecting the character instead of the words :) Switch split.chars to split.words and it will do word by word, as the docs cover.

 

It's by far best to try and understand the code instead of just copying and pasting from other people's demos, especially really old ones like the one you copied from to get that splitting. 

 

It also appears you didn't attempt to follow the instructions that I gave in my last post. Unfortunately we don't have the capacity to build out every request that people make in these forums. If you'd like someone to build this effect for you and aren't willing to learn how to do it yourself you can post in our jobs freelance forum and I'm sure you can hire someone to build it for you quite quickly. 

 

Also please use the "fork" button when creating new versions of your pen so that the old versions are retained for context in these forums.

  • Like 1
Link to comment
Share on other sites

21 minutes ago, ZachSaucier said:

That's because you're selecting the character instead of the words :) Switch split.chars to split.words and it will do word by word, as the docs cover.

 

It's by far best to try and understand the code instead of just copying and pasting from other people's demos, especially really old ones like the one you copied from to get that splitting. 

 

It also appears you didn't attempt to follow the instructions that I gave in my last post. Unfortunately we don't have the capacity to build out every request that people make in these forums. If you'd like someone to build this effect for you and aren't willing to learn how to do it yourself you can post in our jobs freelance forum and I'm sure you can hire someone to build it for you quite quickly. 

 

Also please use the "fork" button when creating new versions of your pen so that the old versions are retained for context in these forums.

hej thanks for your explanation , I just needed a working demo as I mention above that am newbie, and its for learning purpose 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...