How to connect this plug-in

[Vyacheslav]

Hey , tell me please , how to connect this plug-in to my site on webflow?

[cyberdave (Dave S.)]

Hi @Vyacheslav, thanks for the post. You can implement code like this using a combination of custom code: Custom code in head and body tags | Webflow University and using the design UI.

Try this:

1. Create a div on your page with an ID of “wrapper” (without the quote marks)
2. Create a second div and put that div within the wrapper div and give it an ID of “artifact” (again without the quotes)
3. Exist the designer UI and go to the Custom Code tab of Site Settings
4. copy the following code below to your Footer and then save changes and publish your site

​Copy this code below from the codepen:

<script>
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var SmoothScroll = function(){
  this.init();
};

SmoothScroll.prototype = {
  dirOfChange: 0,
  scrollTop: 0,
  init: function(){
    this.bindEvents();
    this.render();
  },
  bindEvents: function(){
    var self = this;
    $('body').on('mousewheel', function(e){
      e.preventDefault();
      var change =  e.deltaY * 2;
      self.scrollTop -= change;
      
      if(change > 0){
        self.dirOfChange = -1;
      }else{
        self.dirOfChange = 1;
      }
    });
  },
  render: function(){
    var self = this;
    window.requestAnimFrame(function(){      
      self.render();
    }); 
    
    if (this.dirOfChange < 0) {
      if (this.scrollTop > -1) {
        this.scrollTop = 0;
        return;
      }
    } else {
      if (this.scrollTop < 1) {
        this.scrollTop = 0;
        return;
      }
    }
    
    TweenMax.set($('body'), {
      scrollTop: "+=" + this.scrollTop
    });

    this.scrollTop *= 0.9;
  }
};
var ss = new SmoothScroll();
</script>