[Every time I leave the page the position of the "Start and End trigger" refresh and change position]

Yes yes! That solves the problem! Thank you very much GrennSock and Cassie! 

[Every time I leave the page the position of the "Start and End trigger" refresh and change position]

this the code : 

See the Pen JjNgMyG by Louispop (@Louispop) on CodePen

 

Look at Markers. Change tab and come back to see that the markers change position.

[Every time I leave the page the position of the "Start and End trigger" refresh and change position]

https://giphy.com/gifs/scroltrigger-Br8jmkNReaKrWC5KfG/fullscreen

[Every time I leave the page the position of the "Start and End trigger" refresh and change position]

This the test page I made, Look at the scroll trigger markers and how they  refresh their positions when you click on another Tab and then back to page https://ado.agency/testphonepage2/. I also tried to show this in the GIF above.

[Every time I leave the page the position of the "Start and End trigger" refresh and change position]

Every time I leave the page the position of the "Start and End trigger" refresh and change position according to Viewport I guess... Can this be changed so that it stays in the same position?

 

[How to move a element away from viewport regardless of viewport dimension.]

if the Viewport is bigger,  then the "animtion1" element won’t disappear from screen.

Can I for example use a percent sign like this ( X: -100%)

this is my code bellow 

 

 

gsap.registerPlugin(ScrollTrigger);

gsap.to(".animation1", {

    x: -860,
    duration: 12,
    scrollTrigger: {
        pin: true,
        trigger: ".animation1",
          markers: {
        startColor: "blue",
        endColor: "purple",
        fontSize: "1rem",
        },  
        start: "100% center",
        end: "200% 30%",
        scrub: 2
    }

});

See the Pen RwVzgrP by Louispop (@Louispop) on CodePen