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

[Louis Pop]

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

[Cassie]

Hey there Louis,

Welcome to the forums!

You can use functional values to calculate units that are dependant on viewport width or other variables.

See the Pen poPXrdX?editors=0011 by GreenSock (@GreenSock) on CodePen

 

 

end: `+=${elem.offsetHeight}` // won't be updated on refresh
end: () => `+=${elem.offsetHeight}` // will be updated

Also - if you want the animation values to update, make sure the ones you want to update are function-based values and set invalidateOnRefresh: true in the ScrollTrigger.