For anyone using Angular 10, I had issues with importing TweenMax/Lite or Timeline. Went with gsap and then it worked.
*.component.ts
import { gsap, Power3 } from 'gsap';
import ScrollToPlugin from 'gsap/ScrollToPlugin';
Add to constructor:
gsap.registerPlugin(ScrollToPlugin); // Register ScrollTo plugin
And then for Scroll I added a scrollTo method:
scroll(event: any, el: HTMLElement) {
event.stopPropagation();
const topY = el.getBoundingClientRect().top;
gsap.to(window, 1, {
scrollTo:{
y: el,
offsetY: 5,
autoKill: true
},
ease: Power3.easeOut
});
}
Note: the topY thing didn't workout, just passed in the element and then it worked great.
*.componenet.html
<a class="page-scroll link-underline-menu" (click)="scroll($event, about)" href="#about">About</a>