Jump to content
Search Community

How to have Scroll Trigger have 50% of screen height as the end point

pixelbakery test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hiya,

 

I tried searching around but couldn't find anything, so forgive me if this is a repeat question. I have a fixed nav bar at the top of my site that I want to animate in on the initial page load (I think I have this part under control). When the user scrolls I want parts of it to animate out and disappear once they've moved downwards 50% of the total screen height. It's not wrapped in a 100vh container because obviously it's a nav, and all of the first sections have different heights so I can't base it off of that. What's the best approach for this? Create a dummy element with a super negative z-index? I thought the answer was `document.body`, but then I realized that makes no sense because the body is super long. 

 

I'm using reactjs. No jQuery in this household =]

 

Thanks

Link to comment
Share on other sites

  • Solution

Hello pixelbakery.

 

You could do it something like this...

 

See the Pen bGYKQEJ by akapowl (@akapowl) on CodePen

 

...or even just use it as an absolute value like this...

 

See the Pen GROGwVV by akapowl (@akapowl) on CodePen

 

...or use a % value relative to the start like this e.g. ...

 

See the Pen vYWrQWz by akapowl (@akapowl) on CodePen

 

...and of course you can try combining different start and end options for whatever makes the most sense for your scenario.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

@akapowl Hi again, a few things

 

- What if someone loads the page with an anchor link that's on some section further down the page?

- How would I handle an initial animation that fires once when the page loads?

- I'm struggling to move this over to react. Any suggestions?

 

Here's my code as of right now:

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
import { useEffect, useRef } from 'react'
 
function Navbar() {
     let box1 = useRef(null)
     let box2 = useRef(null)
 
// Initial Load
     useEffect(() => {
          gsap.set([box1, box2], {
          y: -64,
     })
     gsap.to([box1, box2], 0.8, {
          delay: 0.8,
          ease: 'power3.out',
          y: 0,
          autoAlpha: 1,
          stagger: {
               amount: 0.15,
          },
     })
     }, [box1, box2])
 
// // Scroll Downwards
useEffect(() => {
     gsap.to([box1, box2], 0.8, {
          scale: 2,
          ease: 'none',
          scrollTrigger: {
               trigger: 'body', // technically not neccessary - when you don't pin anything, the body will be the default
               start: 0,
               end: () => innerHeight / 2,
               scrub: true,
               markers: true,
          },
     })
     }, [box1, box2])
 
return (
 
<div
ref={(el) => (box1 = el)}
className='fixed top-0 left-0 w-32 h-32 bg-peach z-50 opacity-0 '
>
<p>asdff</p>
</div>
 
<div
ref={(el) => (box2 = el)}
className='fixed top-0 right-0 w-32 h-32 bg-peach z-50 opacity-0 '
>
<p>asdf</p>
</div>
</>
)
}
export default Navbar

 

Link to comment
Share on other sites

@OSUblake

 

Here you go! 

 

Just to clarify, I have three goals I'm trying to accomplish.

1. Have all of the elements stagger in from autoAlpha:0 from above the top of the screen
2. When a user scrolls partially down the page, trigger an animation that hides the three box elements by sending the back past the top of the page with an autoAlpha: 0 again. I was hoping that this would simply be triggered by the scroll position instead of having it animate as you scroll.

3. Hamburger nav (which I have working hooray)

 

See the Pen bGYxRNj by pixelbakery (@pixelbakery) on CodePen

Link to comment
Share on other sites

Quick questions, does hamburger always stay in place after the initial animation? And for the hiding part, when does it reveal again? When you scroll all the way to the top of page, or just when you scroll up? I've seen both of those variations, and I wasn't sure what you were going for.

 

Link to comment
Share on other sites

Yup =] Hamburger never moves. I have it rotating right now just for testing. The three rectangles that say 'what we make', 'who we are', and 'start a project' should hide at 50% of the screen's height is scrolled and then come back into view when scrolling back up and to 50% of the screen height. so the former- the top of the page. Does that make sense at all?

 

Here's our production website if you want to see it in action: https://pixelbakery.netlify.app

 

I know it kind of seems like it's working correctly on there, but it's severely buggy and not built with react in mind at all.

Link to comment
Share on other sites

See if this gets you going in the right direction. I just used standalone ScrollTrigger to toggle the nav items. The back ease looks a little bit weird in reverse, so if you wanted a different ease when hiding the items, you should just create a new animation in that if/else.

 

if (self.isActive) {          
          gsap.to(boxes, {
            overwrite: true,
            ease: "back.out", // or whatever exit ease you want
            y: -64,
            opacity: 0,
            stagger: {
              amount: 0.25
            }
          });
          
        } else {          
          gsap.to(boxes, {
            overwrite: true,
            ease: "back.out",
            y: 0,
            opacity: 1,
            stagger: {
              amount: 0.25
            }
          });
        }

 

See the Pen abVQEwJ by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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...