Implement Smooth Scrolling & Parallax Effect in Next.js using Lenis and GSAP

• react-lenis

  1 210 10.0 JavaScript

  Discontinued Lenis react wrapper

  

In your Next.js project, create a file named SmoothScrolling.tsx in the components folder. This component utilizes @studio-freight/react-lenis, a React wrapper for the Lenis library. You can learn more about it from it's documentation.

• lenis

  4 0 3.8 JavaScript

  Discontinued How smooth scroll should be

  

Lenis Library

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• picsum-photos

  81 2,127 8.2 Go

  Lorem Ipsum... but for photos.

• hamo

  1 104 8.1 JavaScript

  Hamo means hook, do the math.

  

To get the window width we will use useWindowSize hook. This hook is imported from @studio-freight/hamo which is a package that has list of hooks that you can use. It is also created by studio-freight Make sure to install it using the following command:

• GreenSock-JS

  96 18,632 4.7 JavaScript

  GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

  

GSAP (GreenSock Animation Platform)

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project