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

[Hisami Kurita]

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

[GreenSock]

Just use function-based values and set invalidateOnRefresh: true on your ScrollTrigger:

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

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

Does that help?

[Hisami Kurita]

Thansk you!! It turned out as expected !!