Topic: SmoothScroll pageScrollEasing Easing method Angular denis.frolov.mail pro asked 5 years ago

Hi Guys,

According to your docs: pageScrollEasing accepts type of string which should specify - "Easing method to be used while calculating the scroll position over time (default is linear easing)".

In the example below that, you use:

`[pageScrollEasing]="functionName"`

Could you please specify what exactly functionName you meant in your example and what exactly this property is expecting? I tried different default names like "ease-out" or like this "easeOut" or even cubic-bezier curve parameters like "0, 0, .58, 1" but nothing seems to work.

What am I missing? Edyta Dabrowska answered 5 years ago

Please try and put them inside the function like this:
``` myEasing: EasingLogic = { ease: (t: number, b: number, c: number, d: number): number => { t = .25; b = .1; c = .25; d = 1; if (t === 0) return b; if (t === d) return b + c; if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; } }; ```
Let me know if this helps.

denis.frolov.mail pro commented 5 years ago

))) it sure does, in not very "user friendly" way though... Thank you Edyta! denis.frolov.mail pro answered 5 years ago

Hi Edyta, Ok great, I copied your code to my app.component.ts and added [pageScrollEasing]="myEasing" attribute to my html. Where would I put (0.25, 0.1, 0.25, 1) parameters then for the ease function? According to your example it accepts 4 numbers end returns a number - ease: (t: number, b: number, c: number, d: number): number =>... Thanks! Edyta Dabrowska answered 5 years ago

Hello, This name is an example. You can name it like this: `[pageScrollEasing]="myEasing"` and then define it in your app.component.ts: ``` myEasing: EasingLogic = { ease: (t: number, b: number, c: number, d: number): number => { // easeInOutExpo easing if (t === 0) return b; if (t === d) return b + c; if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; } }; ``` Remember also to add import path: `import { EasingLogic } from 'your-path/typescripts/pro/smoothscroll/index';` Hope this helps.