Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Louis Pop

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

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

 

  • Like 6
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×