feat: add scrolling with lentis

Author: Domar95

src/app/app.component.ts

@@ -1,10 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ScrollService } from '@services/scroll.service';
 
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  constructor(private scrollService: ScrollService) {}
+
+  ngOnInit() {
+    this.scrollService.initLenis();
+  }
+}

src/services/scroll.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ScrollService } from './scroll.service';
+
+describe('ScrollService', () => {
+  let service: ScrollService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ScrollService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/services/scroll.service.ts

@@ -0,0 +1,19 @@
+import { Injectable, NgZone } from '@angular/core';
+import Lenis from 'lenis';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ScrollService {
+  private lenis!: Lenis;
+
+  constructor(private ngZone: NgZone) {}
+
+  initLenis() {
+    this.ngZone.runOutsideAngular(() => {
+      this.lenis = new Lenis({
+        autoRaf: true,
+      });
+    });
+  }
+}