Jump to content
GreenSock

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

Scroll trigger when scrolling up

Recommended Posts

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?

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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? :)

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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. 

  • Like 2
Link to comment
Share on other sites

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

Thanks for your help!

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