GSAP Stagger The stagger() method is used to animate multiple elements with a stagger effect. GSAP ScrollTrigger The ScrollTrigger plugin is used to trigger animations based on the scroll position. GSAP Text Le
Use the pen below to easily copy and paste the urls to the bonus plugins: Each time you reply to a thread in the forums, please make sure to use the "Fork" button in the bottom right of the CodePen window so that you don't keep overwriting the original CodePen with new changes. T...
newLenis({anchors:{offset:100,onComplete:()=>{console.log('scrolled to anchor')}}}) Troubleshooting Make sure you use the latest version ofLenis Include recommended CSS. Remove GSAP ScrollTrigger. Remove Lenis and be sure that your element/page is scrollable anyway. ...
constlenis=newLenis()lenis.on('scroll',(e)=>{console.log(e)})lenis.on('scroll',ScrollTrigger.update)gsap.ticker.add((time)=>{lenis.raf(time*1000)})gsap.ticker.lagSmoothing(0) React: See documentation forreact-lenis. Instance settings ...
durationnumber1.2The duration of scroll animation (in seconds). Useless if lerp defined easingfunction(t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))The easing function to use for the scroll animation, our default is custom but you can pick one fromEasings.net. Useless if lerp def...
Make sure you use the latest version of Lenis Include recommended CSS. Remove GSAP ScrollTrigger. Remove Lenis and be sure that your element/page is scrollable anyway. Be sure to use autoRaf: true or to manually call lenis.raf(time).