Jump to content
Search Community

staggerTo with yoyo – determining the first element on the reverse stagger

aok test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm running through a stack of images one after the other and it yoyo back which is repeated infinitely.

 

The issue I'm having is that the first and last item (top and bottom in the stack) also fade to opacity 0 so you either get this weird blank space (if it's staggering top to bottom) or the top image fires too fast (if it's staggering bottom to top).

 

What I'd like to achieve is if it's the last item in the stagger (working top to bottom) then it doesn't apply the opacity change (but the timing is the same so it treats it as if it was 'skipped' or 'not there') and then working bottom to top it hangs the image a little longer?

 

I've managed to achieve this when staggering top to bottom (so it effectively ignores the last item) but how can do the same for the reverse direction so when it reaches the first item (and turns the opacity to 1) it hangs for a little longer on that image?

 

var stack = new TimelineMax({
  repeat: -1,
  yoyo: true
});
stack.staggerTo('.parallax > div:not(:last)', 0.1, {
  opacity: 0,
  onComplete: function() {
    if (this.target == $('.parallax > div').first()[0]) {
      /* Below doesn't work */
      stack.pause();
      $(this.target).css('opacity', 1);
    }
  }
}, 0.2);

 

See the Pen JQvdQz by anon (@anon) on CodePen

Link to comment
Share on other sites

Keep in mind when using GSAP. Its best to use the  GSAP set() method instead of the jQuery css() method. The reason being is that you will be changing CSS properties outside of GSAP. So this way GSAP can keep track of those CSS properties changed outside of itself by using the set() method. It will save you a lot of stress and hair pulling :blink:

 

GSAP set() method: https://greensock.com/docs/TweenLite/static.set()

 

Happy Tweening :)

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