Jump to content
Search Community

Text rotator

chairman test
Moderator Tag

Recommended Posts

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 comment
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 comment
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 comment
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 3
Link to comment
Share on other sites

  • 10 months later...
  • 6 months later...
44 minutes ago, glenn_pot said:

How would I slow the whole thing down?

You could change the duration of the tween inside of the loop. Or use .timeScale() on the timeline.

 

Also I noticed you used the old formatting for duration of the tween that you added. We recommend including the duration inside of the vars parameter so that you can make use of GSAP's defaults functionality.

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