Foreach loop error

[harp 13 Likes (Newbie)]

Not sure why the last element is fading out, Foreach should stop at the last element, this version is continues that last tween even after all elements are finished looping and if I use, repeat: -1, the first element comes in with no animations but a jump:

 

I made a previous version of this slider and it worked fine, last element stopped when it should:

See the Pen jObpWZg by designsbyharp (@designsbyharp) on CodePen

 

 What maybe wrong in my code?
 

See the Pen gOaJrzP by designsbyharp (@designsbyharp) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey Harp. You've got several areas of improvement here:

• You're not using the repeatBeginning function at all.
• You have a bunch of unused variables which make it more confusing.
• I'd use gsap.utils.toArray(".slider__img") instead of Array.from(document.querySelectorAll(".slider__img")). 
• Just use an image with your SVG instead of inlining it every time (.cross).
• ease: 'Power2.easeIn' is invalid. Use the condensed string form of eases: ease: 'power2.in'
• bgImage[i+1] doesn't exist for the last iteration.

The main issue is that last point. You don't have any animation visually happening time span because the target doesn't exist.

[harp 13 Likes (Newbie)]

1 hour ago, harp said:

Okay thanks, I made the changes.

See the Pen gOaJrzP by designsbyharp (@designsbyharp) on CodePen

So i+1 wasn't doing anything really for the last slide because it couldn't find anything?
and I don't need to use "repeatBeginning" anymore because as the slides lop again via repeat: -1, everything runs fine.

Thank you.