Search code examples
javascriptdreamweavereasing

Lenis.js easing option for smooth scroll works but has syntax error


I use lenis.js for smooth scrolling which works well, see fiddle example. However my Dreamweaver shows syntax error which is the easing option: easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)).

The whole code:

const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
    direction: "vertical",
    gestureDirection: "vertical",
    smooth: true,
    smoothTouch: false,
    touchMultiplier: 2,
});

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

requestAnimationFrame(raf);

I would like to know if this line is correct, or from where this error comes from, or why Dreamweaver shows it as an error. As I am completely blind in this easing with math.pow question, please try to explain as simpliest possible.


Solution

  • Looks like the Dreamweaver version you use (or the linter it uses, or a linter rule), does not support/allow the arrow function syntax (at least not in the context of your code).

    Try using a regular function like this

    const lenis = new Lenis({
        duration: 1.2,
        easing: function(t){return (t === 1 ? 1 : 1 - Math.pow(2, -10 * t))},
        direction: "vertical",
        gestureDirection: "vertical",
        smooth: true,
        smoothTouch: false,
        touchMultiplier: 2,
    });
    

    Also check if you can update the DW version, its linter or edit the linter rules.

    Perhaps Use Lint code in Adobe Dreamweaver to detect errors could be of use.