i was following along some dude in youtube creating a landing page with animation using GSAP , but at the part when he uses scrollanimations he used gsap.to() method but the trick is when is use

docement.querySelector('string here to class name')

it gives me an error Property 'querySelector' does not exist on type 'Document'

but it works perfectly with the man .. i did my research but can't find no thing useful here is the code

import { Document } from './../../node_modules/yaml/index.d';
import { DOCUMENT } from '@angular/common';
import {
  Component,
  ElementRef,
  Inject,
  Injectable,
  OnInit,
  ViewChild,
} from '@angular/core';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

@Injectable()
export class AppComponent implements OnInit {
  @ViewChild('secondSection', { static: true })
  secondSection!: ElementRef<HTMLDivElement>;
  @ViewChild('imageFirst', { static: true })
  imageFirst!: ElementRef<HTMLDivElement>;
  @ViewChild('imageSecond', { static: true })
  imageSecond!: ElementRef<HTMLDivElement>;
  @ViewChild('menu', { static: true })
  menu!: ElementRef<HTMLDivElement>;
  @ViewChild('heading_1', { static: true })
  heading_1!: ElementRef<HTMLHeadingElement>;

  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit(): void {
    this.initialAnimations();
    this.initScrollAnimations();
  }

  initScrollAnimations(): void {
    gsap.to(this.imageFirst.nativeElement, {
      scrollTrigger: {
        trigger: this.imageFirst.nativeElement,
        scrub: true,
        start: '120% center',
      },
      duration: 1.1,
      scale: 1.2,
      height: 250,
    });

    gsap.to(this.imageSecond.nativeElement, {
      scrollTrigger: {
        trigger: this.imageSecond.nativeElement,
        scrub: true,
        start: '80% center',
      } as ScrollTrigger.Vars,
      duration: 1.1,
      scale: 1.2,
      height: 380,
    });

    gsap.to(this.heading_1.nativeElement, {
      scrollTrigger: {
        trigger: this.heading_1.nativeElement,
        scrub: true,
        start: '150% center',
      } as ScrollTrigger.Vars,
      color: '#fff',
      duration: 1.5,
    });

    gsap.to(this.document.querySelector('.paragraph'), {
      scrollTrigger: {
        trigger: this.document.get('.paragraph'),
        scrub: true,
        start: '150% center',
      } as ScrollTrigger.Vars,

      color: '#fff',
      duration: 1.5,
    });

    gsap.to(this.document.querySelector('.btn'), {
      scrollTrigger: {
        trigger: this.document.get('.btn'),
        scrub: true,
        start: '150% center',
      } as ScrollTrigger.Vars,

      color: '#fff',
      duration: 1.5,
    });

    gsap.to(this.document.querySelector('#story-line'), {
      scrollTrigger: {
        trigger: this.document.get('#story-line'),
        scrub: true,
        toggleClass: 'active',
        start: 'top center',
      } as ScrollTrigger.Vars,

      opacity: 0,
      y: 40,
      duration: 1.5,
    });

CodePudding user response：

I don't know why this code exists:

constructor(@Inject(DOCUMENT) private document: Document) {}

I would remove it.

Then I would instead go to your tsconfig.json and ensure that 'dom' is in "lib": ["es2018", "dom"] This will allow you to just directly reference document from your *.ts files, enabling document.querySelector('.paragraph').

Note that there is no this. in document.querySelector('.paragraph') anymore.

https://stackblitz.com/edit/angular-ivy-h6kzqj?file=src/app/app.component.ts

CodePudding user response：

With gsap you don't need to pass the actual DOM element, you can just pass as a string and gsap will querySelector for you.

so instead of gsap.to(this.document.querySelector('.btn') ...

Do gsap.to('.btn') ...

Should work just fine

Then do the same to the trigger object property