Property 'querySelector' does not exist on type 'Document'

Question

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,
    });

Answer 1

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