Skip to content

Simple smooth scroll based on GSAP library

Notifications You must be signed in to change notification settings

geraldnako/gscroll

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 

Repository files navigation

GScroll

Pretty basic smooth scroll based on GSAP library (1ko minified).

If you’re using GSAP on your project, you can use this package to simply add a smooth scroll.
It is basically ScrollTrigger free but if you plan to use ScrollTrigger, you can use GScroll as a setter of the current distance scrolled.

Install

$ npm i @grcmichael/gscroll

Declaration

import gsap from "gsap"
import GScroll from "@grcmichael/gscroll"
  
const scroll = new GScroll( "#scroll-section" )

scroll.init()
scroll.wheel()

Constructor

GScroll( elementString, speedFloat, onUpdate: function )

element — DOM element that will translate.
speed (optional) — Speed of the scroll, must be superior to 0. Default is 0.6.
onUpdate (optional) — Contains code that will be read when GScroll is running.

Methods

init() initializes the scroll

wheel() add the wheel event listener (the scroll is now active)

unwheel() removes the wheel event listenerer (it pauses the scroll)

resize() recalculates the height of the declared section

scrollTo( element: String, duration: Float ) moves the current position of the page to the position of the element

destroy() kills everything

Live examples

Basic utilisation: GSAP + GScroll
Complete utilisation: GSAP + ScrollTrigger + GScroll

They use GScroll

benjaminrighetti.com
anagram.club
brouillon.com
ugopignal.com

About

Simple smooth scroll based on GSAP library

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%