Jump to content
Search Community

Google search like sticky header animation

Shaiq test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

@Shaiq What have you tried already? Would love to see it.

 

We could just build it for you, but where is the fun in that! We're here to help you understand GSAP, so having some reference of what you've tried really helps us, help you.

 

Just open @GreenSock pen and try out  some stuff and when you're stuck post your pen back here and we'll be glad to help!

  • Thanks 1
Link to comment
Share on other sites

22 minutes ago, mvaneijgen said:

@Shaiq What have you tried already? Would love to see it.

 

We could just build it for you, but where is the fun in that! We're here to help you understand GSAP, so having some reference of what you've tried really helps us, help you.

 

Just open @GreenSock pen and try out  some stuff and when you're stuck post your pen back here and we'll be glad to help!

import { useRef, useState } from 'react'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

import { HeaderContainer } from './header.styled'
import { useWindowScrolling } from 'hooks/useWindowScrolling'
import { useIsomorphicLayoutEffect } from 'hooks/useIsomorphicEffect' // It is useEffect


gsap.registerPlugin(ScrollTrigger)

const Header = () => {
  const animateRevealOffset = 122
  const animationFadeOffset = 175
  const ref = useRef<HTMLDivElement>(null)
  const [animationRevealed, setAnimationRevealed] = useState(false)
  const [direction, scrollTop] = useWindowScrolling() // give the window.scrollY and scroll direction


  useIsomorphicLayoutEffect(() => {
    if (!ref.current) {
      return
    }

    if (
      direction === 'down' &&
      scrollTop >= animateRevealOffset - 2 &&
      !animationRevealed
    ) {
      console.log('reveal')
      ref.current.style.top = -52 + 'px'
      setAnimationRevealed(true)
    }

    if (
      direction === 'up' &&
      scrollTop <= animateRevealOffset - 2 &&
      animationRevealed
    ) {
      console.log('hide')
      ref.current.style.top = 20 + 'px'
      setAnimationRevealed(false)
    }
  }, [scrollTop])

  useIsomorphicLayoutEffect(() => {
    const anim = gsap
      .from(ref.current, {
        top: 0,
        position: 'fixed',
        paused: true,
      })
      .progress(1)

    ScrollTrigger.create({
      scrub: true,
      start: '+=' + animateRevealOffset,
      end: '+=' + 52,
      markers: true,
      onUpdate: (self) => {
        self.direction === 1 ? anim.play() : anim.reverse()
      },
    })
  }, [])

  return (
    <HeaderContainer ref={ref}>
      Google
    </HeaderContainer>
  )
}

export default Header

This is the code for header that i created but it doesn't yield the exact google like animation. On google when window.ScrollY reaches 122, top=-52px is set on the header and then between window.ScrollY=122 to 174 the animation happens and while scrolling up at window.ScrollY=122 the top is set back to 20px and position absolute.

Link to comment
Share on other sites

This is just 1/3 of the code, this is missing the CSS and HTML. Can you try making a minimal demo on Codepen (just fork @GreenSock their pen) , this way you can just focus on the animation and not worry about how to implement it in your whole project. 

 

If you must you can also fork our templates on Codesandbox to work directly in React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use, but personally when learning a new tool I like to start simple on Codepen and not have to worry about the whole build process and just focus on the animation. 

Link to comment
Share on other sites

1 minute ago, mvaneijgen said:

This is just 1/3 of the code, this is missing the CSS and HTML. Can you try making a minimal demo on Codepen (just fork @GreenSock their pen) , this way you can just focus on the animation and not worry about how to implement it in your whole project. 

 

If you must you can also fork our templates on Codesandbox to work directly in React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use, but personally when learning a new tool I like to start simple on Codepen and not have to worry about the whole build process and just focus on the animation. 

I will create a codepen for this and share

  • Like 1
Link to comment
Share on other sites

30 minutes ago, mvaneijgen said:

This is just 1/3 of the code, this is missing the CSS and HTML. Can you try making a minimal demo on Codepen (just fork @GreenSock their pen) , this way you can just focus on the animation and not worry about how to implement it in your whole project. 

 

If you must you can also fork our templates on Codesandbox to work directly in React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use, but personally when learning a new tool I like to start simple on Codepen and not have to worry about the whole build process and just focus on the animation. 

Here is the codepen

See the Pen KKeGwaP by shaiqkar (@shaiqkar) on CodePen

Link to comment
Share on other sites

  • Solution

@Shaiq I don't work with React, so I've just copied @GreenSock's example, but for someone who does know React it will probably be easy to implement.

 

What I've done, is move the header up 100% of its own height, then wait for 0.5 seconds and then move it back to it's original position. This happens over twice the height of the height of the header. (the header is 80px and the ScrollTriggers end is 160px) I recommend getting these values dynamically in your code, so that if the height of the header changes, you'll not need to update this value) 

 

Also what is important is that I've set the easing to none, so that everything feels smooth. GSAP normally adds an easing of power1.out which doesn't feel that great when the animation is hook to the scroll of the visitor. 

 

Definitely play with the start and end values and timing of the animations yourself, to tweak it to your liking. Hope it helps and happy tweening! 

 

See the Pen BaVqoLd?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

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