Jump to content
Search Community

Reset animation when scroll up

shilpa_gz test
Moderator Tag

Recommended Posts

Hi,

 

I am running through a few issues trying to reset animate when scrolling up.

- When I scroll down the page, the ball is revolving from up to down. and the ball is revolving down to up when scrolling up.
- But I would like the ball should be reset when the user scrolls up the page on any point.
- Animation won't work on scroll up.
- e.g. when the ball is on any point (to) like second, third, fourth any step. and user scrolling up that time then ball animation should be reset or the ball goes on the first step. And the ball should be starting from up to down when scrolling down again.
- Ball should not work reverse on scroll up.

 I can't figure out how I can do this. Any help is appreciated.

Thanks in advance.

See the Pen XWzVJqj?editors=1111 by shilpa_gz (@shilpa_gz) on CodePen

Link to comment
Share on other sites

Hi OSUblake - That works for me.   I appreciate it!

One more thing I want to know is there is any way to set the ball position with gsap for all devices. Because I tried to set the position of the ball with CSS in different media queries but not working properly. For now, the ball position gets changed on a different screen. It should be on the snowy mountain. Do you have any idea?

Link to comment
Share on other sites

Hi, @OSUblake,

As you per your solution, The animation reset on scroll up. But there is one issue. It is not working from the start when scrolling down the page.
For example: if scroll up the page when I am on ball 4, the animation reset from ball 1. And then again scroll down the page ball direct jump to ball 4 from ball 1. The ball should revolve one by one like ball1 ball2 ball3 ball 4. on scroll down.

on scroll up, it get reset but didn't restart. Can you please help me to solve this?

 

Link to comment
Share on other sites

yes, but the animation reset working properly for that animation. Even I tried the same code for this animation. But didn't get any luck

 

  ScrollTrigger.create({
        trigger: ".forth-section",
        pin: true,
        start: "top top",
        end: "+=550",
        endTrigger: '.snow-extrdiv',
        markers: true,
        toggleActions: "play none none restart",
        ease: "power1.inOut",
        scrub: true,
        onUpdate(self) {
          if (self.direction === -1) {
            self.scroll(self.start);
          }
          else{
              var progress = self.progress;
                gsap.to(tl, {
                duration: 0.5,
                ease: "expo",
                progress
            });
          }
        }
    })
Link to comment
Share on other sites

I'm having a very difficult time understanding what you mean.

 

It looks like that ScrollTrigger doesn't have any animation associated with it, so when you self.scroll(...) it won't have an effect on any animation. Did you intend to link an animation to that ScrollTrigger? Currently it's pointless to have toggleActions or scrub (those are mutually exclusive, by the way) on that ScrollTrigger because those only apply if an animation is attached to the ScrollTrigger. 

 

It actually looks like you're trying to manually apply a scrub: 0.5 to the "tl" animation in the onUpdate. Why not simply assign that to the ScrollTrigger itself? That'll perform better anyway. You should definitely set overwrite: true if you're gonna keep that manual tween in there. 

 

If you still need some help, please provide a minimal demo that clearly illustrates the problem and we'd be happy to answer any GSAP-specific questions. 

Link to comment
Share on other sites

It looks like you didn't try to implement any of my suggestions. And you've got a lot of invalid code/options in there. 

 

I assume this is what you're looking for: 

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

 

You could definitely simplify a LOT of that code (see the hints I gave you in your other thread about using a loop). 

 

I hope that helps. 

Link to comment
Share on other sites

Hi @GreenSock, Thank you so much for the help. It's working for me but facing some minor position issues on scroll up.

While Scroll up the page (ball revolve down to up), the section should be fixed in the same position.
But now section goes above their position. And it looks like jumping the second section to the first section.

I tried different ways but didn't get any luck. Don't have much knowledge about gsap. Can you please help me with how I can fix that?

image.thumb.png.b62a2c21a509d14ac77eda7fbc77511d.png


You can see the issue here: 

Link to comment
Share on other sites

5 hours ago, shilpa_gz said:

While Scroll up the page (ball revolve down to up), the section should be fixed in the same position.
But now section goes above their position. And it looks like jumping the second section to the first section.

 

It is going to the start. Let's say when you scroll up, the browser is going to scroll up 100px, so you will see 100px of the previous section. Notice if you try to scroll on your mouse versus the keyboard the amount it moves is different.

 

Link to comment
Share on other sites

Yeah, everything looks like it's behaving exactly as I would expect. Your code is causing it to jump back to the start - that's by design. So it's doing precisely what you're telling it to do. I don't really understand what you want it to do differently. You can't logically have it both ways. 

Link to comment
Share on other sites

I tried to add the div for the below codpen.   Below codepen working fine on scroll up. On scroll up, the second section does not jump back to section first

<div style="height:300px"></div> 

See the Pen dyZJYbx by GreenSock (@GreenSock) on CodePen

(Didn't use this code as it does not start from the first point when scrolling down the page again)


The current code should be work like this in "scroll up" part only - 

See the Pen XWzVJqj by shilpa_gz (@shilpa_gz) on CodePen

Link to comment
Share on other sites

Hey @shilpa_gz,

 

It's really not easy to understand your intentions exactly: What should happen, when and how?

 

Here's an example:
- the first text fades in shortly after the scrolling process begins (CSS: h1 is visibility:hidden; )
- special version scrollUp: if (self.direction === -1 && self.progress > 0.85). Fast rewind only from the last part.
- like fading the texts, you could also show the pictures of the snowball

 

See the Pen zYPRNOj?editors=0110 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • 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.
×
×
  • Create New...