Smooth scroll animation - vanilla JavaScript

Last update: Aug 14, 2022

Overview

Smooth Scroll Animation Using Vanilla JavaScript

Provides smooth scroll functionality on clicking buttons with different eeasing properties. The "smoothSCroll(target, duration, effect)" function accepts three arguments:

target: the section to be scrolled. e.g: '.section-2'
duration: the duration for the animation to be executed It accepts the value in miliseconds(1s = 1000ms)
effect(optional): the effect to be applied during scroll animation. e.g: easeInOutCirc, easeInOutQuad, etc. The default effet is easeInOutQuad.

Available Effects:

easeInOutCirc
linearTween
easeInQuad
easeInCubic
easeInOutQuad(default)

SafeCycle—a tool that keeps cyclists safe. Gone are days of weaving through busy city streets, SafeCycle finds all the bike routes for you to ensure a smooth ride wherever you want to go.

Inspiration Biking—an everyday form of travel for students and professionals across the globe. On-campus, back home, and with the people that we know

May 2, 2022

A-Frame components for smooth locomotion and snap turning

A-Frame locomotion A collection of A-Frame components, systems and primitives that enable all sorts of locomotion in VR. It't built to be modular, fle

Sep 1, 2022

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

iSlider iSlider is a lightweight, high-performant, no library dependencies cross-platform slide controller. It can help handling most sliding effects,

Nov 25, 2022

Smooth subdivision surface modifier for use with three.js BufferGeometry.

Three Subdivide This modifier uses the Loop (Charles Loop, 1987) subdivision surface algorithm to smooth modern three.js BufferGeometry. — Live Demo —

Dec 3, 2022

A blazingly fast Bun.js filesystem router, with an unpleasantly smooth experience!

Oily A blazingly fast Bun.js filesystem router, with an unpleasantly smooth experience! Installation · Usage · Examples · Discord Installation Once yo

Dec 19, 2022

Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed.

scrooth Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed. Why? I needed that, and I was unable to find p

Aug 29, 2022

Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.

smooth-shadow Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation. Demo As Tobias already p

Oct 15, 2022

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Jul 19, 2022

A javascript library to animate elements on scroll page events

ScrollJS by Sam Sirianni ScrollJS is a library written in Javascript. With ScrollJS you can animate elements on scroll events. Visit the ScrollJS webs

Mar 21, 2021

Comments

Very little setup info

The ReadMe file is really lacking in actual instructions on how to implement this. I couldn't figure it out, so I'm moving on to another one. I suggest you take the time to write your ReadMe as if a complete beginner is going to be using your code.

opened by brandonwmartin 0

Owner

Bhagabati Prasad

Self taught !Empty stack Developer.

GitHub

Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

34 Dec 14, 2022

A simple smooth scrolling using 100% vanilla JavaScript.

SmoothScroll.js A simple smooth scrolling using 100% vanilla JavaScript, and it's only 3kb! > Demo Usage // index.html <html> <head> <link rel="

5 Aug 24, 2022

Reveal CSS animation as you scroll down a page

WOW.js Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the set

9.7k Jan 8, 2023

Simple scroll based text reveal animation library.

Simple scroll based text reveal animation library. ⛰️ DEMO Getting Started Using packge manager NPM Install textify using npm: npm install textify.js

27 Dec 5, 2022

A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.

Lava-Lamp Description: A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic anima

38 Jun 4, 2022

I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna come out once the countdown is finished or in other words, "Birthday Time".

Countdown-Birthday-Fireworks-Animation I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna com

19 Dec 31, 2022