SmoothScroll pageScrollEasing Easing method Angular


Topic: SmoothScroll pageScrollEasing Easing method Angular

denis.frolov.mail pro asked 7 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?

 


                                                                    
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.

denis.frolov.mail pro answered 7 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!  

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 7 years ago

))) it sure does, in not very "user friendly" way though... Thank you Edyta!

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No