Jump to content
Search Community

ScrollTrigger based on window scroll instead of trigger element

rag test
Moderator Tag

Recommended Posts

Hi guys,

 

is it possible to fade an element in, after scrolling lets say 120% of the viewport? The element is a fixed element (back to top button).

 

I tried using the position of the .header element (top navbar) and trigger the animation, when the .header is 500px out of the viewport.

 

gsap.to(".js-back-to-top", {
  scrollTrigger: {
    trigger: ".header",
    markers: true,
    start: -500,
    onToggle: self => console.log("toggled, isActive:", self.isActive),
  },
  autoAlpha: 1,
});

 

thank you for your help

 

Link to comment
Share on other sites

  • rag changed the title to ScrollTrigger based on window scroll instead of trigger element

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.
×
×
  • Create New...