Jump to content
Search Community

Smooth Scrolling not working

SagarSurendhrababu test

By SagarSurendhrababu
in GSAP

Moderator Tag
 Share

Recommended Posts

SagarSurendhrababu test

SagarSurendhrababu

Posted
Posted

Hello, I just grab the code from smooth scrolling doc and tried but its not working please give me solution...

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrolling</title>
    <style>
.box.active {
  background-color: blue;
}




 
body {
  background-color: #111;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
 
.box {
  width: 100px;
  height: 100px;
  background-color: #28a92b;
  position: absolute;
  left: 100px;
  z-index: 100;
  line-height: 100px;
  font-size: 50px;
  text-align: center;
}
 
.a {
  top: 200px;
  background-color: #8d3dae;
}
 
.b {
  top: 600px;
}
 
.c {
  top: 1000px;
  background-color: #e26c16;
}
 
.ghost {
  top: 1000px;
  background-color: #444;
}
 
.line {
  width: 2px;
  height: 3000px;
  position: absolute;
  left: 600px;
  top: 0px;
/*   visibility: hidden; */
  background-color: #777;
}
 
        
    </style>
</head>
<body>
    <div class="box a">a</div>
    <div class="box b">b</div>
 
    <div class="box c">c</div>
    
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
    <script>
// Smooth scroll setup
const bodyScrollBar = Scrollbar.init(document.body, { damping: 0.1, delegateTo: document });
 
bodyScrollBar.setPosition(0, 0);
bodyScrollBar.track.xAxis.element.remove();
 
// How to get them to work together
ScrollTrigger.scrollerProxy("body", {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value;
    }
    return bodyScrollBar.scrollTop;
  }
});
      
// You can use a ScrollTrigger in a tween or timeline
gsap.to(".b", {
  x: 400,
  rotation: 360,
  scrollTrigger: {
    trigger: ".b",
    start: "top center",
    end: "top 100px",
    scrub: true,
    markers: true,
    id: "scrub"
  }
});
 
    </script>    
</body>
</html>
Link to comment
Share on other sites
akapowl test

akapowl

Posted
Posted

Hello @SagarSurendhrababu

 

If you want to use smooth-scrollbar.js for the smooth-scrolling, you will have to load their script in the first place.

 

https://github.com/idiotWu/smooth-scrollbar

 

But keep in mind, that it is not a GreenSock product, so these forums do not offer support for it.

 

On the .scrollerProxy() documentation page there is also a ScrollTrigger-native smooth-scrolling approach though, that you could consider using instead.

 

Happy Smooth-Scrolling :)

  • Like 1
Link to comment
Share on other sites
akapowl test

akapowl

Posted
Posted

Well the code you posted above is not from the ScrollTrigger-native smooth-scrolling approach - but trying to use smooth-scrollbar without loading their script. The ScrollTrigger-native approach does contain detailed comments in the JS for how to set up things for it to work - if you follow those ( and that includes the HTML markup and neccessary CSS setup ) you should actually be good to go.

 

As mentioned in that other thread already, if you need assistance, please create a minimal demo.

I'm not sure how else to help you without even seeing, how you are trying to approach things.

  • Like 1
Link to comment
Share on other sites
SagarSurendhrababu test

SagarSurendhrababu

Posted
  • Author
Posted

I am sorry , i forgot to copy code for you

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrolling</title>
    <style>
.box.active {
  background-color: blue;
}




 
body {
  background-color: #111;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
 
.box {
  width: 100px;
  height: 100px;
  background-color: #28a92b;
  position: absolute;
  left: 100px;
  z-index: 100;
  line-height: 100px;
  font-size: 50px;
  text-align: center;
}
 
.a {
  top: 200px;
  background-color: #8d3dae;
}
 
.b {
  top: 600px;
}
 
.c {
  top: 1000px;
  background-color: #e26c16;
}
 
.ghost {
  top: 1000px;
  background-color: #444;
}
 
.line {
  width: 2px;
  height: 3000px;
  position: absolute;
  left: 600px;
  top: 0px;
/*   visibility: hidden; */
  background-color: #777;
}
 
        
    </style>
</head>
<body>
    <div class="box a">a</div>
    <div class="box b">b</div>
 
    <div class="box c">c</div>
    
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
    <script>
      
// You can use a ScrollTrigger in a tween or timeline
gsap.to(".b", {
  x: 400,
  rotation: 360,
  scrollTrigger: {
    trigger: ".b",
    start: "top center",
    end: "top 100px",
    scrub: true,
    markers: true,
    id: "scrub"
  }
});
 
// this is the helper function that sets it all up. Pass in the content <div> and then the wrapping viewport <div> (can be the elements or selector text). It also sets the default "scroller" to the content so you don't have to do that on all your ScrollTriggers.
    function smoothScroll(content, viewport, smoothness) {
  content = gsap.utils.toArray(content)[0];
  smoothness = smoothness || 1;
 
  gsap.set(viewport || content.parentNode, {overflow: "hidden", position: "fixed", height: "100%", width: "100%", top: 0, left: 0, right: 0, bottom: 0});
  gsap.set(content, {overflow: "visible", width: "100%"});
 
  let getProp = gsap.getProperty(content),
    setProp = gsap.quickSetter(content, "y", "px"),
    setScroll = ScrollTrigger.getScrollFunc(window),
    removeScroll = () => content.style.overflow = "visible",
    killScrub = trigger => {
      let scrub = trigger.getTween ? trigger.getTween() : gsap.getTweensOf(trigger.animation)[0]; // getTween() was added in 3.6.2
      scrub && scrub.kill();
      trigger.animation.progress(trigger.progress);
    },
    height, isProxyScrolling;
 
  function onResize() {
    height = content.clientHeight;
    content.style.overflow = "visible"
    document.body.style.height = height + "px";
  }
  onResize();
  ScrollTrigger.addEventListener("refreshInit", onResize);
  ScrollTrigger.addEventListener("refresh", () => {
    removeScroll();
    requestAnimationFrame(removeScroll);
  })
  ScrollTrigger.defaults({scroller: content});
  ScrollTrigger.prototype.update = p => p; // works around an issue in ScrollTrigger 3.6.1 and earlier (fixed in 3.6.2, so this line could be deleted if you're using 3.6.2 or later)
 
  ScrollTrigger.scrollerProxy(content, {
    scrollTop(value) {
      if (arguments.length) {
        isProxyScrolling = true; // otherwise, if snapping was applied (or anything that attempted to SET the scroll proxy's scroll position), we'd set the scroll here which would then (on the next tick) update the content tween/ScrollTrigger which would try to smoothly animate to that new value, thus the scrub tween would impede the progress. So we use this flag to respond accordingly in the ScrollTrigger's onUpdate and effectively force the scrub to its end immediately.
        setProp(-value);
        setScroll(value);
        return;
      }
      return -getProp("y");
    },
    getBoundingClientRect() {
      return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
    }
  });
 
  return ScrollTrigger.create({
    animation: gsap.fromTo(content, {y:0}, {
      y: () => document.documentElement.clientHeight - height,
      ease: "none",
      onUpdate: ScrollTrigger.update
    }),
    scroller: window,
    invalidateOnRefresh: true,
    start: 0,
    end: () => height - document.documentElement.clientHeight,
    scrub: smoothness,
    onUpdate: self => {
      if (isProxyScrolling) {
        killScrub(self);
        isProxyScrolling = false;
      }
    },
    onRefresh: killScrub // when the screen resizes, we just want the animation to immediately go to the appropriate spot rather than animating there, so basically kill the scrub.
  });
}
 
// for a horizontal version, see https://codepen.io/GreenSock/pen/rNmQPpa?editors=0010



 
    </script>    
</body>
</html>
Link to comment
Share on other sites
akapowl test

akapowl

Posted
Posted

 

As mentioned above;

 

44 minutes ago, akapowl said:

The ScrollTrigger-native approach does contain detailed comments in the JS for how to set up things for it to work - if you follow those ( and that includes the HTML markup and neccessary CSS setup ) you should actually be good to go.

 

You will need to stick to the HTML-markup and CSS-styling from the demo for it to work in the first place.

I am referring to the #viewport and #content elements here.

  

<div id="viewport">
  <div id="content">

    ...

  </div>
</div>

  

#viewport {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#content {
  overflow: visible;
  width: 100%;
  /* set a height because the contents are position: absolute, thus natively there's no height */
  height: 2400px;
  /* ... */
}

 

 

Also it doesn't look like you are initiallizing the smooth-scroll anywhere, too.

  

/* 
Setup: wrap your content <div> in another <div> that will serve as the viewport.
Call this function FIRST (before you create your ScrollTriggers); it sets the 
default "scroller" for you (otherwise it'd be the window/body, but it should be 
the content <div>) 
*/
smoothScroll("#content");

 

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