Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
chairman

Text rotator

Recommended Posts

Hi :)

Im trying to make a simple text-rotator. But I'm not sure if I should use StaggerFrom og make multiple timelines.

 

How do I make the whole animation restart after it reaches the last word

:-)

See the Pen YzzjPQQ by ekkaks (@ekkaks) on CodePen

Link to post
Share on other sites

Hey chairman and welcome to the GreenSock forums.

 

There are several ways to do this. I would recommend making use of sub-timelines to make it a little easier to keep track of. Then I would add those timelines to the master timeline at your calculated delay time.

const words = document.querySelectorAll('.rotator > span')

let main = new TimelineMax({repeat: -1});

for (let i = 0; i < words.length; i++) {
  let delay = i;
  let wordTL = new TimelineMax();
  wordTL.from(words[i], 1, { y: '-100%', opacity: 0 });
  wordTL.to(words[i], 1, { y: '100%', opacity: 0});
  main.add(wordTL, delay);
}

However, the above leaves a gap between the last word and the first word. In order to get around that, one method is to duplicate the word in your HTML and then do the following:

for (let i = 0; i < words.length; i++) {
  let delay = i - 1;
  let wordTL = new TimelineMax();
  if(i !== 0) {
    wordTL.from(words[i], 1, { y: '-100%', opacity: 0 });
  }
  
  if(i !== words.length - 1) {
    wordTL.to(words[i], 1, { y: '100%', opacity: 0});
  }
  main.add(wordTL, delay);
}

See the Pen XWWBbQZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In the new GSAP 3, you would just replace new TimelineMax with gsap.timeline().

  • Like 1
Link to post
Share on other sites

Hi ZachSaucier

Thanks a lot. This was exactly what I was trying to achieve. :-)

I will also try to use the GSAP 3 syntax. This is my second day of GSAP'ing, so I'm still just on the copy/paste code level.

Thanks

Link to post
Share on other sites

Another side note is that instead of using y: '100%' you could use GSAP's yPercent instead: yPercent: 100.

Link to post
Share on other sites

Thank you again. 

I've been playing a bit around with the code. But can you explain to me like I am 5 what this line does

if(i !== words.length - 1) {

If the word is not equal to number of words minus 1? I know it will skip the first line but its still a bit confusing to me :-)

 

I tried to upgrade to 3.0.1 but my code generates a gap in the middle of the animation. I cant make a codepen because I cant add gsap 3.0.1 as a dependency and the CDN isn't working. I get an ngix error 404: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js

 

Here is my code 3.0.1:

const words = document.querySelectorAll('.rotator > span')

let main = gsap.timeline({repeat: -1});

for (let i = 0; i < words.length; i++) {
  let delay = i - 1;
  let wordTL = gsap.timeline();
  if(i !== 0) {
    wordTL.from(words, 1, { y: '-100%', opacity: 0, ease: 'power2.out' });
  }
  
  if(i !== words.length - 1) {
    wordTL.to(words, 1, { y: '100%', opacity: 0, ease: 'power2.out' });
  }
  main.add(wordTL, delay);
}

 

Link to post
Share on other sites
4 hours ago, chairman said:

can you explain to me like I am 5 what this line does

if(i !== words.length - 1) {

If the word is not equal to number of words minus 1?

That's exactly what it is! The -1 is because arrays are 0 indexed. So if you have an array with 3 elements, the position of the last one is actually 2, not 3. So it's checking to see if it's the last element in the array. 

 

4 hours ago, chairman said:

I cant add gsap 3.0.1 as a dependency and the CDN isn't working. I get an ngix error 404: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js

Yes, CDNJS has been very slow in updating unfortunately. We're waiting on them. You can use the GSAP 3 beta file in the mean time. I went ahead and loaded in the demo below.

 

4 hours ago, chairman said:

I tried to upgrade to 3.0.1

In your GSAP 3 code, you have words as your target for the tweens. It needs to be the specific element (target) that you're wanting to animate in that loop, so words instead.

See the Pen OJJwQrL?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to post
Share on other sites

I see. thanks for the explanation :)

When I look at your codepen, I think there is still a gap after "dolor". Is it possible to shorten the delay before the animation loops?

Link to post
Share on other sites
16 minutes ago, chairman said:

I think there is still a gap after "dolor". Is it possible to shorten the delay before the animation loops?

Oops, you're right. Sorry I didn't wait for it to finish :) Busy day with GSAP 3 stuff. Here ya go.

 

See the Pen OJJwEpq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Side note, you should put the duration in the vars parameter in GSAP 3 like I did in the demo above. 

  • Like 2
Link to post
Share on other sites

Thanks. Its helping me a lot. I'm fairly new to javascript. So seeing these if/else combinations is really helpful for me because they open up new ways of combining my animations :)

Link to post
Share on other sites

@heyitsA I can see what you're showing now. It's a bug in the latest beta version of GSAP. Just switch out for the latest live version (3.5.1) and it will work fine. We'll get the beta fixed as well :) 

  • Like 1
Link to post
Share on other sites

Sorry about that - it should be fixed now. Thanks for pointing it out. 

  • Like 2
Link to post
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.

×