Jump to content
Search Community

Loop Through an Array of Text and Display on Screen

blizve0 test
Moderator Tag

Go to solution Solved by blizve0,

Recommended Posts

  • Solution

Hi, I'm Trying to Create Something Like this preview https://www.awwwards.com/inspiration/broadwick-live

 

I have an array of words which i would like to show on screen using gsap setText or set innerHtml on the Screen. I want the loop to run infinitely and switch words every 0.2 Seconds. I cannot get it to work, can somebody help me with this ?

See the Pen bGLvBjm by blitzve0 (@blitzve0) on CodePen

Link to comment
Share on other sites

I think the easiest thing would be to put them on a timeline and set repeat to infinite. Note: I had to use a delayedCall as the .switch-text element wasn't ready.

 

See the Pen e255ee55bdaad00c15dfe941b6905962 by PointC (@PointC) on CodePen

 

You could also just use a function that calls itself onComplete of each word. Lots of ways to do it really.

 

Happy tweening.

:)

 

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

  • 6 months later...

Hey All,

i am developing a new website at the moment and need the same effect as the above one. I implemented it as in your examples and everything works great except one thing: If i have a number in my array, it counts up from zero :D

 

I duplicated @PointC CodePen to show you a example. Maybe you have an idea how to fix this?

 

See the Pen vYrMBPd by fhauck (@fhauck) on CodePen

 

Thanks!

 

Link to comment
Share on other sites

ha, that's a pretty funny oddity. I haven't seen that before.

 

I switched to using a set() (no animation) an I used the position parameter instead of duration.

feel free to change the duration variable

 

 var duration = 1;
  gsap.delayedCall(1, () => {
    let textTimeline = gsap.timeline({ repeat: -1 });
    array.forEach((obj, i) => {
      textTimeline.set(".switch-text", {
        innerHTML: array[i]
      }, i * duration);
    });
  });

 

See the Pen BaVENgv?editors=0010 by snorkltv (@snorkltv) on CodePen

 

 

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