[Google search like sticky header animation]

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

[Google search like sticky header animation]

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

[Google search like sticky header animation]

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.

[Google search like sticky header animation]

10 hours ago, Cassie said:

Hi Shaiq, maybe you're looking for pinning? If you can give some more information we can help a little more effectively.

I need something like this https://drive.google.com/file/d/1MJH_dJBdGji3qF_RT8j4zIqoxh4TgI8s/view?usp=share_link

[Google search like sticky header animation]

I wan't to have a google search result page like sticky header animation with gsap, how can i do it.