הטמעת Lenis / Locomotive Scroll לגלילה חלקה

LCP במובייל סובל מגלילה בדידים — משתמשים רואים פראלקס מקרטע ו-FPS נמוך. פתרון: Lenis או Locomotive Scroll. הניסיון שלנו: ביותר מ-50 פרויקטים השגנו 60 FPS יציב אפילו ב-iPhone SE. ללא הספריות הללו, גלילה חלקה נראית מקוטעת וחסרה אינרציה. לאפקט קולנועי, נדרשת אינטגרציה נכונה — נראה כיצד להימנע מטעויות נפוצות.

לקוחות מבקשים יותר ויותר גלילה קולנועית — זו טרנד באינטרנט. הצוות שלנו, עם ניסיון של למעלה מ-5 שנים בפיתוח Full-Stack, שילב את שתי הספריות בעשרות פרויקטים: מדפי נחיתה ועד SPA מורכבים. הנה איך לעשות זאת נכון.

איזו ספרייה לבחור: Lenis או Locomotive Scroll?

הדילמה הראשונה היא בחירת הספרייה. Lenis קלה פי 3 מ-Locomotive Scroll (5 KB לעומת 15 KB ב-gzip), מתוחזקת באופן פעיל במאגר Lenis, ואינה קשורה למבנה HTML ספציפי. לפי התיעוד, הספרייה מותאמת ל-bundlers מודרניים. Locomotive Scroll v2 מתאימה אם אתה צריך פראלקס מובנה ללא ספריות נוספות, אבל לאנימציות מותאמות אישית Lenis נותנת יותר שליטה. FPS במובייל גבוה פי 1.5-2 עם Lenis (60 FPS לעומת 30-40 FPS). חיסכון משמעותי בתקציב הרישוי בהשוואה לחלופות מסחריות.

כיצד להתקין את Lenis ולהתחיל גלילה חלקה

התקנה דרך מנהל החבילות:

npm install lenis 

יצירת מופע עם הגדרות:

import Lenis from 'lenis';

const lenis = new Lenis({
  duration: 1.2,
  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
  orientation: 'vertical',
  smoothWheel: true,
  touchMultiplier: 2,
});

function raf(time: number) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

כיצד לשלב את Lenis עם GSAP ScrollTrigger

זהו מקרה השימוש העיקרי: Lenis מנהלת את הגלילה, ScrollTrigger מנהל את האנימציות. לאחר יצירת Lenis, הירשם לאירוע הגלילה ועדכן את ScrollTrigger. החלף את ה-ticker ברירת המחדל של GSAP בקריאה ל-lenis.raf.

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

בזכות זה, אנימציות ScrollTrigger מסונכרנות עם הגלילה הווירטואלית. חוסך עד שעתיים של ניפוי באגים טיפוסיים של חוסר סנכרון.

כיצד לשלב את Lenis עם React

אינטגרציית React דורשת context ו-hook. צור LenisProvider והשתמש ב-useLenis לגלילה פרוגרמטית. זה מפשט את יישום הגלילה החלקה ב-React.

import { createContext, useContext, useEffect, useRef } from 'react';
import Lenis from 'lenis';

const LenisContext = createContext<Lenis | null>(null);

export const LenisProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const lenisRef = useRef<Lenis | null>(null);

  useEffect(() => {
    const lenis = new Lenis();
    lenisRef.current = lenis;

    const raf = (time: number) => lenis.raf(time);
    requestAnimationFrame(raf);

    return () => {
      lenis.destroy();
    };
  }, []);

  return <LenisContext.Provider value={lenisRef.current}>{children}</LenisContext.Provider>;
};

export const useLenis = () => useContext(LenisContext);

חשוב: צור את המופע בתוך useEffect וקרא ל-destroy בעת ביטול ההרכבה.

מה לעשות עם שגיאות טיפוסיות

הנה מדריך שלב-אחר-שלב לפתרון בעיות נפוצות:

1. תוכן דינמי: לאחר הוספת אלמנטים דרך fetch או React state, קרא ל-npm install lenis או import Lenis from 'lenis'; const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), orientation: 'vertical', smoothWheel: true, touchMultiplier: 2, }); function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); .
2. מיכלים ניתנים לגלילה מקוננים: החרג מודאלים מהגלילה הווירטואלית על ידי הוספת התכונה import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); lenis.on('scroll', ScrollTrigger.update); gsap.ticker.add((time) => { lenis.raf(time * 1000); }); gsap.ticker.lagSmoothing(0); .
3. מכשירים ניידים: השבת את import { createContext, useContext, useEffect, useRef } from 'react'; import Lenis from 'lenis'; const LenisContext = createContext<Lenis | null>(null); export const LenisProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const lenisRef = useRef<Lenis | null>(null); useEffect(() => { const lenis = new Lenis(); lenisRef.current = lenis; const raf = (time: number) => lenis.raf(time); requestAnimationFrame(raf); return () => { lenis.destroy(); }; }, []); return <LenisContext.Provider value={lenisRef.current}>{children}</LenisContext.Provider>; }; export const useLenis = () => useContext(LenisContext); ב-iOS (אפשרות lenis.resize()) והשתמש ב-ScrollTrigger.refresh() על אלמנטים עם פראלקס להאצת GPU מאולצת.
4. ביצועים: עקוב אחר FPS עם data-lenis-prevent. אם במכשירים חלשים ה-FPS יורד מתחת ל-50, הפחת את פרמטר smoothTouch ל-0.8 או השבת את החלקות בגרסאות Android ישנות יותר.

השוואת זמן אינטגרציה: פתרון מותאם אישית לעומת Lenis

מה כלול באינטגרציה

• בחירה והגדרה של הספרייה (Lenis / Locomotive) לארכיטקטורת הפרויקט.
• אינטגרציה עם GSAP ScrollTrigger ואנימציות מותאמות אישית (כולל timelines).
• אפקטי פראלקס דרך data-attributes או חישובים מותאמים אישית.
• התאמה למכשירים ניידים (iOS/Android) תוך התחשבות ברזולוציות מסך.
• פתרון בעיות ביצועים (ResizeObserver, will-change, אופטימיזציית compositing).
• תיעוד קוד והדרכת צוות.
• תמיכה טכנית ל-30 יום לאחר המסירה.

למה לבחור ב-Lenis לפרויקט חדש?

הניסיון שלנו מראה: Lenis פותרת 90% ממשימות הגלילה החלקה ללא קסם מיותר. היא משתלבת בקלות עם כל ספריית אנימציה (GSAP, Framer Motion, Three.js). אנו מבטיחים שאינטגרציה סוהר תיקח לא יותר מ-3 ימים, כולל התאמה למובייל ואפקטי פראלקס מותאמים אישית. חיסכון בתקציב בהשוואה לפתרון מותאם אישית הוא עד 40%. אם יש לך פרויקט מורכב עם מיכלים ניתנים לגלילה מקוננים או טעינה דינמית, צור קשר — נעריך את המשימה.

ציר זמן ועלות

הגדרת Lenis בסיסית עם גלילה חלקה — מיום אחד. אינטגרציה מלאה עם פראלקס, ScrollTrigger ו-React — 2-3 ימים. העלות מחושבת באופן אישי לפי מורכבות והיקף. הזמן אינטגרציה היום — קבל ייעוץ ממהנדס עם ניסיון של למעלה מ-5 שנים.