Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
aok

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

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

Hello aok and welcome to the forums. 

 

So you're just wanting the first and last elements to have a slight delay before the animating is yoyoed? If so, you can do so by just using the repeatDelay property like so:

 

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

  • Like 2
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.
×