Jump to content


Foreach loop error

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.


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.