Jump to content
Search Community

hello-there

Members
  • Posts

    3
  • Joined

  • Last visited

Posts posted by hello-there

  1. I have simple animations on a homepage component that works amazingly when I first visit the page or if I just refresh with F5:
     

      @ViewChild('section1', {static: true}) section1: ElementRef<HTMLDivElement>;
      @ViewChild('section2', {static: true}) section2: ElementRef<HTMLDivElement>;  
    
      ngOnInit(): void {
        this.initScrollAnimation();
      }
    
      ngOnDestroy() {
        ScrollTrigger.refresh();
      }
    
      initScrollAnimation(): void {
        gsap.utils.toArray<HTMLElement>(".defil").forEach(section => {
              ScrollTrigger.create({
                trigger: section,
                start: 'top top',
                pin: true,
                pinSpacing: false
              });
        });
    
        gsap.to(this.section1.nativeElement, {
          scrollTrigger: {
            trigger: this.section2.nativeElement
          },
          duration: 1,
          y: 150,
          scale: 0.9
        })
      }

    But when I visit another page through angular routing and get back to this one I can't make this 2 scrolltrigger to work. I am new to the scrolltrigger and to gsap and there may be something I'm not understanding and not using well according to angular lifecycle.

    If you could help me on this one, I am stuck. Tried to find similar issues but it didn't seem to be the same problem nor work for me.

    I also have another minor issue that is not as important to me but when the gsap.to animation triggered if I get back to the top of the page and get back down it doesn't retrigger a second time.

×
×
  • Create New...