Jump to content
GreenSock

goodcontext

There is a problem with using the ScrollTo Plugin.

By goodcontext, in GSAP. Views: 1,152

Go to solution Solved by akapowl,

Recommended Posts

Posted

Hello.
What I'm going to implement is if you scroll down a little bit, it's automatically scrolled to Section_02.
On the other hand, I want to scroll to Section_01 automatically when I scroll up a little from Section_02.
By the way, if you scroll down a little bit, you will move to Section_02 once, but it will not work properly after that.

I think it's related to the ToggleAction of the ScrollTrigger, but it's no use fixing it because I don't know it well.
How can I make it work?

See the Pen gOvKXqd by goodcontext (@goodcontext) on CodePen

Link to comment
Share on other sites
  • Author
Posted

Do I have no choice but to use this code in CSS?
I didn't really like it when I used it, so I checked if I could use it on GSAP, but if I search with GSAP on the code pen, most of it is in the code below CSS.
And ScrollToPlugin only has examples of what you click on.
Therefore, I wonder if I have no choice but to use the code below CSS, not ScrollTo.
Do you have any other GSAP code?

  

scroll-snap-type: y mandatory;
Link to comment
Share on other sites
Posted

Just my two cents but that feels pretty strange to me as a user to be scrolling along and the whole page takes off like that. 

  • Like 2
Link to comment
Share on other sites
  • Author
Posted

That's exactly the code I wanted.
Thank you very much.
I thought it was only possible with CSS, so I was trying with scroll-snap-type: y mandatory; code.
The homepage is a portfolio for employment, and each page is equally 960px; high.
I posted a question to make it easier to move the page.
It's exactly the code I wanted.

Thank you so much for making the code.

 

I'll take into consideration your suggestions.

Thank you for your kind words.

Link to comment
Share on other sites
  • Author
Posted

There was a problem, so I made a minimal demo.
Pressing Refresh F5 in the browser moves up and down in SECTION_03.
In SECTION_04, if you press it a few times, it will scroll to SECTION_03.
There was no problem with SECTION_01 and SECTION_02.
In the minimal demo, I added the h1 tag, and there is a slight movement in SECTION_01 and SECTION_02.

Originally, there was no movement at all.
I thought I should kill something or return false, so I tried return false to the function in the js file, but it didn't work.
I can't use the F5 key in the code pen, so I'm uploading the source code.
What should I do to solve it?

 

Since there can't be no answers, I'll do an unmark as solution for a moment.
Thank you.

 

index.html 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bug report</title>
    <link href="css/reset.css" type="text/css" rel="stylesheet">
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <script src="js/gsap.min.js"></script>
    <script src="js/ScrollTrigger.min.js"></script>
    <script src="js/ScrollToPlugin.min.js"></script>
    <script src="js/script.js" defer></script>
</head>
<body>
    <section class="section_01">
        <h1>SECTION_01</h1>
    </section>

    <section class="section_02">
        <h1>SECTION_02</h1>
    </section>

    <section class="section_03">
        <h1>SECTION_03</h1>
    </section>

    <section class="section_04">
        <h1>SECTION_04</h1>
    </section>
</body>
</html>

style.css 

@charset "utf-8";

h1 {
  position: relative;
  top: 45%;
  left: 40%;
  font-size: 70px;
}
.section_01 {
  width: 1920px;
  height: 960px;
  background-color: #000;
  color: #fff;
}
.section_02 {
  width: 1920px;
  height: 960px;
}
.section_03 {
  width: 1920px;
  height: 960px;
  background-color: #000;
  color: #fff;
}
.section_04 {
  width: 1920px;
  height: 960px;
}

script.js 

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

ScrollTrigger.create({
  trigger: ".section_02",
  start: "top 85%",
  end: "top 15%",
  onEnter: () => gsap.to(window, { scrollTo: ".section_02" }),
  onEnterBack: () => gsap.to(window, { scrollTo: ".section_01" })
});

ScrollTrigger.create({
  trigger: ".section_03",
  start: "top 85%",
  end: "top 15%",
  onEnter: () => gsap.to(window, { scrollTo: ".section_03" }),
  onEnterBack: () => gsap.to(window, { scrollTo: ".section_02" })
});

ScrollTrigger.create({
  trigger: ".section_04",
  start: "top 85%",
  end: "top: 15%",
  onEnter: () => gsap.to(window, { scrollTo: ".section_04" }),
  onEnterBack: () => gsap.to(window, { scrollTo: ".section_03" })
});
Link to comment
Share on other sites
Posted

I don't follow the question and there is no revised demo, but it sure seems like you're trying to invent ScrollTrigger snapping. That's already available to you. Here's a basic example.

 

See the Pen gOvjOXv by PointC (@PointC) on CodePen

 

Seems to me that would be a better option than having the window take off while the user is scrolling.

  • Like 4
Link to comment
Share on other sites
Posted

 

TLDR:

Maybe try setting ScrollTrigger.config({ limitCallbacks: true }) for that problem on reload.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config()

 

----

 

I just want to add, that there have already been loads of threads combining ScrollTrigger with the ScrollTo-Plugin, so there already is a sort of refined 'technique' to this around the forum. If I am not mistaken, the code posted by Blake in this thread might be the most refined version of something that originated way back in this thread

 

Here is a basic pen with Blake's code in place:

 

See the Pen YzejXGm by akapowl (@akapowl) on CodePen

 

 

 

One very important aspect that should be noted (and also is to be found throughout many of the threads) is the following:

 

On 11/22/2020 at 3:32 AM, ZachSaucier said:

It should be said that ScrollTrigger is not built to scroll-jack like what this approach does. The approach above is a hack and I don't really recommend using it. If you really need this sort of functionality then you'll need to either build the functionality yourself or use an existing tool like fullpage.js. But even then, depending on your needs, there are likely to be issues because web browsers are simply not built to work in this sort of way. 

 

Often, when people attempt getting something like that to work with ScrollTrigger, what they really want is some sort of fullpage-like slider, like this e.g., utilizing the Observer Plugin and not listening to native scrolling at all.

 

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

 

 

 

That said, you can of course keep going the ScrollTrigger/ScrollTo route if you want, just know, that native scrolling isn't technically made for this, so you will run into lots of issues along the way.

 

Like the thing that you noticed yourself already with refreshes - for that you can try setting ScrollTrigger.config({ limitCallbacks: true })  - I added that in the codepen above and it works for me. If it doesn't for you, what you can try to attempt alternatively is to setup a boolean before you set up the ScrollTriggers, toggle it to false after you created the STs and in the callbacks add a check on that variable to only fire things if that variable is false - simliar to what I did in this thread. As you'll be able see there, you might also have to implement something similar, if you are going to use some sort of navigation - maybe the limitCallbacks will be enough already though.

 

 

 

 

As mentioned there are lots of other threads related to ST in combination with ScrollTo - just too many to remember them all. Here is another one though, that might be of interest for you, as it handles another issue you might run into (although I think that it already is included in the pen with the code Blake posted - can't hurt reading through the explanation though).

 

 

  • Like 3
Link to comment
Share on other sites
  • Author
Posted

As you said, adding the code works exactly well.
There are several SOLUTIONS, but I will give the mark as solution to the last person.
It works well because I added the code below.
Thank you both. Have a nice day.

  

ScrollTrigger.config({
  limitCallbacks: true
});
Link to comment
Share on other sites
  • Author
Posted

I thought everything went well, so I posted a comment, but I found a new bug.
Can't I delete the reply?
I'm going to do it myself as much as I can.

Link to comment
Share on other sites
  • Author
Posted

I took the basic pen with Blake's code and combined it with my js file.
I thought everything went well, but there was a problem with the edge browser.
When you scroll, sometimes you jump two spaces or there's a rebound at the end of the animation.
So I made it myself by referring to the Observer Plugin demo and Blake's code.
As a result, the movement has improved relatively.
The problem occurs when you press the F5 key in your browser.
Press F5 on SECTION_03, SECTION_04 and scroll down to create a strange situation going to SECTION_02.
I think if you press F5, it goes up to SECTION_01.
Because even if you press F5 on SECTION_02 and scroll down, it becomes SECTION_02.
I think it'll be almost perfect if I solve this problem, is there a good way?
I'm making a portfolio for employment, and it's a very important issue for me because I'm expected to press F5.
Please give me a good answer. Thank you.

 

It's a minimal demo that I made.

made for 1920x1080 resolution.

See the Pen QWQBqeQ by goodcontext (@goodcontext) on CodePen

Link to comment
Share on other sites
  • Solution
  • Solution
Posted
2 hours ago, goodcontext said:

I think it'll be almost perfect if I solve this problem, is there a good way?

 

If you are going to use Observer for this you will have to make sure to implement bullet-proof logic for all sorts of scenarios yourself, because observer mostly just observes, as the name says - handling how things should behave, is up to you.

 

As it stands now, you don't have any logic to handle things if you are at a different section but the first, when you reload the page. Initially on load, your  scrollTo_value_index will always get set to 0 - no matter where you are when the page loads. So you will need to implement some sort of initial check, maybe on the scrollposition, for being able to set the index to something different than 0 when the page loads.

 

Same thing will probably apply for cases when users will grab the scrollbar and scrub through the document - that variable will not change then, hence after that things will not work as you probably intended them to work anymore.

 

Hope that will help a bit.

  • Like 4
Link to comment
Share on other sites
  • Author
Posted

Thank you for your answer.
The wrong part you told me was fixed using sessionStorage.
I haven't done any responsive web work yet, and sometimes when I press F5 in SECTION_02, it stops for 1 to 2 seconds, but I don't know why.
Other than that, I think it works perfectly.
Thank you very much for your reply.

Link to comment
Share on other sites
  • Author
Posted

I think it'll be the last question on this topic.
As mentioned above briefly, pressing F5 sometimes causes SECTION_02 to stop for a few seconds.
There are times when it doesn't stop. I'm telling you the conditions for stopping.

1-1. Scroll up 4 times in SECTION_01, scroll down once, go to SECTION_02, press F5 and stop for 1 to 2 seconds.
1-2. Scroll up 3 times at SECTION_01 and scroll down once to SECTION_02 and press F5 to operate normally.

2-1. Scroll up twice at SECTION_01, scroll down twice, scroll down to SECTION_03, scroll up once to SECTION_02, and press F5 and stop for 1 to 2 seconds.
2-2. Scroll up from SECTION_01 and go down to SECTION_03 and come back up to SECTION_02 and press F5 to operate normally.
 

3-1. Go down to SECTION_04, scroll up again, come to SECTION_02, press F5 and stop for 1 to 2 seconds.

3-2. Don't scroll up from SECTION_01, go down to SECTION_03, come back up to SECTION_02, and press F5 to operate normally.

 

After SECTION_02 stops for 1 to 2 seconds, SECTION_02 rises slightly. So at the bottom of SECTION_02 you can see SECTION_03 slightly about 100px.


If it's this kind of condition, it's 100% happening, so could you tell me if there's a problem with the code below with these conditions?
I think it's a very difficult request, but I'm asking because I think it might be an easy question for those who know it well. I think this will be my last question in this topic.
Thank you.

  

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, Observer, TextPlugin);

ScrollTrigger.config({ limitCalbacks: true });

const scrollTo_timeline = gsap.timeline({ defaults: { duration: 0.5 }, onComplete: () => animating = false });

const sections = gsap.utils.toArray("section");
const scrollTo_value_array = [0, (960 + 150), (960 * 2 + 150), (960 * 3 + 150)];

let value;
let scrollTo_value_index = JSON.parse(sessionStorage.getItem('value_index'));
animating = false;

if (typeof(scrollTo_value_index) === undefined) {
  scrollTo_value_index = 0;
  sessionStorage.setItem('value_index', JSON.stringify(scrollTo_value_index))
}

function goToSection(direction) {
  if(animating===false) {
    animating = true;

    if ((scrollTo_value_index >= (sections.length - 1)) && (direction === 1)) {
      scrollTo_value_index = (sections.length - 1);
      sessionStorage.setItem('value_index', JSON.stringify(scrollTo_value_index))
      gsap.to(window, {
        onComplete: () => animating = false
      });
    } else if ((scrollTo_value_index <= 0) && (direction === (-1))) {
      scrollTo_value_index = 0;
      sessionStorage.setItem('value_index', JSON.stringify(scrollTo_value_index))
      gsap.to(window, {
        onComplete: () => animating = false
      });
    } else {
      scrollTo_value_index += direction;
      sessionStorage.setItem('value_index', JSON.stringify(scrollTo_value_index))

      value = scrollTo_value_array[scrollTo_value_index]

      scrollTo_timeline.to(window, {
        scrollTo: { y: value },
        duration: 0.5
      });
    };
  }
}

 

Link to comment
Share on other sites
Posted

Hey there @goodcontext - As @akapowl said -

 

14 hours ago, akapowl said:

If you are going to use Observer for this you will have to make sure to implement bullet-proof logic for all sorts of scenarios yourself, because observer mostly just observes, as the name says - handling how things should behave, is up to you.

 

These forums are for GSAP-specific questions, we unfortunately don't have the resources to help everyone. Especially when it comes to writing complex logic specific to the app or site that they're building. Occasionally we will go above and beyond to help with logic if it seems like a problem a lot of people are bumping up against, but I'm not really 100% sure what you're trying to achieve here?

Obviously @akapowl is welcome to answer, or anyone else for that matter but I just wanted to step in to manage your expectations and make sure that the volunteers staffing these forums don't feel obligated to respond.

 

  • Like 3
Link to comment
Share on other sites
  • Author
Posted

I see.

I've already received enough help.
I think I was too greedy.

I'll ask this question elsewhere.
Thank you.
Have a nice day.

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account