[I want to stop the scrolltrigger function midway.]

I see...thank you!

[I want to stop the scrolltrigger function midway.]

Sorry🙇‍♂️🙇‍♂️🙇‍♂️

I hope this conveys the message...

demo↓

See the Pen OJQgBKp by hisamikurita (@hisamikurita) on CodePen

 

When an element that is fixed is visible, the
Clicking on the hamburger menu will unfasten it.
It is misaligned and the animation is not clean; I want it to remain pinned.

[I want to stop the scrolltrigger function midway.]

Using scrolltrigger's pin, when scrolltrigger is active.
If the parent element becomes fixed, the scrolltrigger will be unfixed, so how to prevent this from happening.

See the Pen RwLWdPP by hisamikurita (@hisamikurita) on CodePen

[I am looking for a way to update the timeline without refreshing the page.]

Thansk you!! It turned out as expected !!

[I am looking for a way to update the timeline without refreshing the page.]

I am looking for a way to update the timeline without refreshing the page.

In the demo below, there is a point where the timeline and scrollTrigger are used together and window.innerWidth & window.innerHeight are used, but they are not recalculated when resized.
I am trying to find the best way to resolve this issue.

It would be nice if there was a timeline.refresh()...

 

tl = gsap.timeline({
  scrollTrigger: {
    trigger: introText,
    start: "center center",
    end: `${5000 - window.innerHeight}px`,
    scrub: 1.0
  }
});

・
・
・

tl.fromTo(introBg,
      {
        x: vwUnit(-48),
        y: vwUnit(8),
        width: vwUnit(54),
        height: vwUnit(245),
        borderRadius: vwUnit(22)
      },
      {
        x: 0,
        y: 0,
        width: window.innerWidth,
        height: window.innerHeight,
        borderRadius: 0
      });

See the Pen rNGaJyr by hisamikurita (@hisamikurita) on CodePen