Jump to content
Search Community

Pin the section not working fully as expected (scroll section in the already scrolling section)

ivevil test
Moderator Tag

Recommended Posts

Hello,

I really appreciate GSAP and really enjoy working with it.
It is pretty straight forward and I really like the support community is getting around here.

It seems like it came my turn to ask a question here. 

I started creating a page - on scroll revealing the next section with transition of zoom in effect, which is working fine. There is still place for improvement but overall it works fine. In the other hand I need third section of my scroller-page to have canvas with the effect like airpods (on scroll it looks like image is moving) - which when I isolate works fine on a separate page, but I would really like to include it here on the third section of my page.
I was trying to check with if statement - asking is it third section - if it is - then tried new scrollTrigger with pin on the class of the third section. When I do that - weird behaviour starts and I am stuck with resolving it.
I would really appreciate your help if you can tell me where am I making a mistake?

Thanks!

See the Pen dymJJJd by ivevil (@ivevil) on CodePen

Link to comment
Share on other sites

Welcome to the forums! Nice to hear that you're enjoying the tools. 💚

 

It's a bit much to ask folks here to go through almost 400 lines of JS/CSS/HTML and craft a solution according to your requirements with that complexity. You'll have a MUCH better chance of getting an answer if you isolate the very particular issue you're struggling with and eliminate everything else. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 

 

For example, if your zooming stuff works fine, then eliminate that. Only leave in the smallest amount of code and elements to illustrate the challenge.

 

From a quick glance at your code, I'd bet you could greatly simplify it by using Observer plugin. See https://greensock.com/docs/v3/Plugins/Observer

 

Once we see a more isolated demo and GSAP-specific question, we'll do our best to jump in and help. 

  • Like 1
Link to comment
Share on other sites

Hello,

Thanks for a warm welcome and thanks for a proposal. It seems like this is exactly what I need - Observer. With it I can check what is the number of the section and then I can implement different transitions according to it. The only thing now is left - I can't implement moving of the scroll when come to the third section. It seems like the scroll is not working as I expected over the section with class ".third". It works when you drag scroller down, but not on touchpad or wheel of the mouse. I tried to include it in the "ignore" parameter of the Observer but it seems like it is not registering it.
 

See the Pen zYWjNeM by ivevil (@ivevil) on CodePen



Any chance that I can "stop" scrolling with observer on the section in the middle of the html code?

Thanks, I really appreciate your help.

Link to comment
Share on other sites

You set preventDefault: true on your Observer, so whenever you wheel or touch-drag, it prevents the default behavior of that event (which is scrolling). So you'd need to stop doing that :)

 

If you still need help, please make sure you greatly simplify your demo and strip out all the non-essential parts. 

Link to comment
Share on other sites

Thank you very much! That was exactly what I needed. I really appreciate it.

Can you also try giving me a hint on the disabling forever loop. In my on scroll effect with observer like here 

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

 
I want to disable forever loop, basically after the last slide is shown - I want to on scroll down to stop showing the first one again, and also on the first slide I want to disable on scroll up showing the last one.
I tried adding on Observer repeat: 1 because I saw that is usually for disabling it, but it is not working like that.
I assume I need to work on checking if it is the last of the slides then to disable scroll down?
Or there is some easier approach?

Thanks for your help.

Link to comment
Share on other sites

8 hours ago, ivevil said:

I assume I need to work on checking if it is the last of the slides then to disable scroll down?

Yes, exactly - you need to handle that in your own logic. You'd no longer need the wrap() method and you'd check to see if the currentIndex is greater than the max or less than zero or whatever. If so, you bail out of the function with a return immediately (and reset the currentIndex). 

 

Good luck!

  • Thanks 1
Link to comment
Share on other sites

That worked as a charm, thank you so much. I was successful to remove the forever loop.


And now one final question - when using scroller in the middle of observer I "stoped" third section to use observer and trigger scroller to get the animation like Airpods - but I got the on scroll this blinking effect which is causing issues on mobile and on safari and not showing animation smooth.
I see in developer tools that inline style for pin element is adding constantly and I am suspecting that is the reason why the animation is not running smooth. Is there any option to remove styling for pinned section? Or you think something else is blocking having smooth animation - frame by frame?

See the Pen zYWjNeM by ivevil (@ivevil) on CodePen



Thanks!

Link to comment
Share on other sites

That's because you keep calling gotoSection() over and over again on every scroll event. You're creating more and more and more ScrollTriggers. Very bad idea :)

 

You need to work out the logic issues in your code. We don't really have the resources to do all of that for you for free. It'd probably be a good idea to add logic to your gotoSection() function that checks to see if the currentIndex matches the new one and if so, just bail out of the function. 

 

Also, even in your AirPods section you're running this in your Observer: 

onDown: () => !animating && gotoSection(currentIndex - 1, -1),
onUp: () => !animating && gotoSection(currentIndex + 1, 1),

Which means that every 10 pixels worth of scroll, you're trying to go to the next/previous section. It seems to me like a mistake. Don't you want to stay in that section for a certain amount of scroll that's much more than 10 pixels? 

Link to comment
Share on other sites

Hello, thanks for the feedback, I appreciate it. 
I improved a little bit my code with your suggestions, so now for Observer I am checking 
 

onDown: () => {
if(scrollingUp) {
gotoSection(currentIndex - 1, -1)
}
},
onUp: () => {
if(currentIndex < sections.length - 1 && scrollingDown) {
gotoSection(currentIndex + 1, 1);
}
},

and in gotoSection() I am passing true or false to currentIndex sections where I need them to scroll with observer or not. And because every section has different transition - for each of them I am checking is index == that-section (ie 3). For airpods section I set them to false both while scrolling and revealing the images in that section.
The thing is now -  when I switch to mobile phone - the behaviour is not the same as for desktop. On desktop everything is working fine, but on mobile, it is not switching good between sections, probably because of the tolerance - which I now set to 200. 
What do you think would be the best tolerance for switch between the sections? I don't want for user to scroll too much, nor to fly over two or three sections at the same time?
Thanks for your support, I appreciate it. I even convinced our clients to take the license (Business Green) for this year to support your work. 

Link to comment
Share on other sites

I found the reason - when I set overflow hidden to body on mobile for safari - it is working fine, because like it seems sections are a little bit bigger than the window view, but on the other hand for mobile users in chrome it is not scrolling airpods section. - Now I just added check if browser is safari then add overflow hidden to body.

  • Like 1
Link to comment
Share on other sites

Hello,

I have one more question regarding this topic. When using observer is there a way to check how much user scrolled?
Because currently I am not getting smooth scroll since on different hardness of scroll it is differently acting for different users.
Is there any out of box solution for solving this issue?
Sometimes for some users the sections are skipping in showing because of the scroll "too much" it went from first, flies over the second and goes to the third section and not holding on the second section for some time.

Link to comment
Share on other sites

Thank you, I will check it out, I was reading documentation but wasn't sure how to use it exactly.


I decided to pick onStop because that one is taking the "whole" scroll of the user no matter how much they grab the screen or scroll of the mouse. It worked perfect until I realised it is triggering on mobile also every  touch. And for example if I have menu for the above code to switch between sections - on open of the menu or selecting the item - it is triggering next scroll + opening that section, so instead of going to the section 5 as expected it would do one more click to the section 6.

 

 Observer.create({
    trigger: "section",
    type: "wheel, touch",
    wheelSpeed: -1,
    onDown: () => {
      indicator = "down";
     },
    onUp: () => {
      indicator = "up";
     },
    onStop: () => {
      if(indicator == "down" && scrollingUp) {
        gotoSection(currentIndex - 1, 1);
      } else if (indicator == "up" && scrollingDown && currentIndex < sections.length - 1) {
        gotoSection(currentIndex + 1, -1)
      }
    },
    // ignore: ".navigation",
});

I tried ignore but it wasn't working to set it to ignore my navigation while scrolling or touching there.

Can you please help me here - how to resolve that issue and get rid of on every touch getting triggered touch on mobile.

Link to comment
Share on other sites

If you'd like some help, please provide a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

 

By the way, are you saying that onStop() fires on every single movement of your finger while touch-scrolling on a mobile device? (many times per drag?)

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