Animation breaks on fourth iteration of loop

[ruba_dub_dub]

The goal is to have the words go from top to bottom with focused word being large and placed beneath. It is currently doing this but breaks on the fourth iteration of the loop. I'm unsure why it decides to work differently after the fourth when it is all the same code.

Is there a better way to do this to avoid such an error? Am I missing something small that could easily remedy this?

Thank you!

See the Pen wvKQjBo?editors=1010 by ethan-sinica (@ethan-sinica) on CodePen

[ZachSaucier]

Hey ruba_dub_dub and welcome to the GreenSock forums!

 

A few notes:

• Starting off a class name with a number is technically invalid. You should start it with a letter instead.
• You don't actually need any of those number classes. Instead, just select those elements using the class name that they all share instead!
• You don't need the new before gsap.timeline().
• In GSAP 3, it's more proper to use the stagger property inside of the vars parameter instead of using .staggerTo, etc. Check out the stagger page for more information. 
• In GSAP 3, it's more proper to include the duration in the vars parameter.
• In GSAP 3, it's more proper to use the condensed string form of eases.
• I recommend using GSAP's defaults to save you some time in writing and editing your animation code. For other tips to animate more efficiently, check out my article on the subject.
• You should avoid animating non-performant properties like margin, padding, fontSize, top, left, and others as much as possible. If you do need to animate non-performant properties (in this case fontSize) then you should try to use position: absolute on the elements that require that change so that it doesn't cause other elements to have to reflow.
• You only need to use string values for properties in GSAP when the unit you're using isn't the default. 

Now with all of that being said, we get to the core of your issue: You have conflicting tweens. Due to your -=3.5 offset, multiple tweens are attempting to affect the same properties of the same objects at the same time, causing a conflict.

 

How you can fix this is to remove the conflict  Here's how I might set it up:

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

[ruba_dub_dub]

Thank you so much! This feedback and help is amazing!

One feature I added in my past version was a mouseover pause function. If the active word was moused over the animation would pause.

    array[i].mouseenter(function () {
        tl.pause();
    })

    array[i].mouseleave(function () {
        tl.play();
    })

Down the line this feature would be used to change display from none to inline for small flavor text for each individual word.

Is this still workable using "words"? I attempted to implement this but I could not get around errors, I'm hoping I'm just missing something straight forward.

 

[ZachSaucier]

Sure, it's quite doable. The logic should be approximately if not exactly the same. Happy to help but it's impossible to help blindly