Scroll trigger when scrolling up

[Emilek1337 4 Likes (Newbie)]

When I scroll down on a page and refresh, the animated elements above the refresh position are hidden. How to make them visible after the refresh?

[ZachSaucier 7,048 Likes (Superhero)]

Hey Emilek. I can't reproduce this behavior. Here's what I'm trying (though from a local file since you can't refresh in CodePen due to the iframe):

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

 

Can you please create a minimal demo (or better yet, just modify the one above) that recreates the issue that you're talking about?

[Emilek1337 4 Likes (Newbie)]

1 minute ago, ZachSaucier said:

Hey Emilek. I can't reproduce this behavior. Here's what I'm trying (though from a local file since you can't refresh in CodePen due to the iframe):

 

 

 

Can you please create a minimal demo (or better yet, just modify the one above) that recreates the issue that you're talking about?

Hi, yes unfortunately you can't recreate the behavior using codepen alone. What I created in my project specifically is a animationGenerator function, with switch case, and 1 case looks like this: 

case 'fade-up': {
                let tween = gsap.from(element, {
                    y: 100,
                    opacity: 0,
                    scrollTrigger: element,
                })
            }

It works with  data attributes, so when I give a data-animation="fade-up" to a div, it animates like the tween above. However, when I scrolled a bit on a page and I refresh the page, the elements above the current position are hidden and because I'm scrolling up they won't even animate. What I want is to show the divs above my current refresh position without the animation. 

Does that make any sense to you now?

[ZachSaucier 7,048 Likes (Superhero)]

It makes sense but this behavior might depend on how the animation is called. As shown in the code I provided above, things are rendered above the refresh.

 

Can you please provide at least the structure of how your JS is setup related to the ScrollTrigger/switch statement that you show?

[Emilek1337 4 Likes (Newbie)]

42 minutes ago, ZachSaucier said:

It makes sense but this behavior might depend on how the animation is called. As shown in the code I provided above, things are rendered above the refresh.

 

Can you please provide at least the structure of how your JS is setup related to the ScrollTrigger/switch statement that you show?

It looks somethings like this, but then with correctly registered scrolltrigger etc., couldn't do it on codepen.

 

https://codepen.io/hachiko0/project/editor/APjvGN

[GreenSock 16,301 Likes (Superhero)]

@Emilek1337 are you using ScrollTrigger 3.3.3? I see that your CodePen is, but I can't seem to reproduce the issue at all. Are you saying that your latest CodePen DOES show the issue for you? I suspect you may just be using an old version of ScrollTrigger. 

 

If you want the animations for elements that are already scrolled past to jump to the end instead of animating, you could so something like this: 

gsap.from(element, {
  opacity: 0,
  duration: 1,
  scrollTrigger: {
    trigger: element,
    // if the page has already scrolled past the end position, make the animation jump to the end.
    onRefresh: self => self.progress === 1 && self.animation.progress(1)
  }
});

If you're still having trouble and you've verified that you're using 3.3.3, can you please provide a reduced test case even if it's not on CodePen? If you need to send us a zip or something (because you can't reproduce it on CodePen), perhaps that'd help. 

[Emilek1337 4 Likes (Newbie)]

Yup, it was a version problem, was using 3.3.1.

Thanks for your help!