Shaiq Posted November 30, 2022 Share Posted November 30, 2022 I wan't to have a google search result page like sticky header animation with gsap, how can i do it. Link to comment Share on other sites More sharing options...
Cassie Posted November 30, 2022 Share Posted November 30, 2022 Hi Shaiq, maybe you're looking for pinning? If you can give some more information we can help a little more effectively. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 30, 2022 Share Posted November 30, 2022 Hi, This might be a good starting point See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen Happy Tweening! Link to comment Share on other sites More sharing options...
Shaiq Posted December 1, 2022 Author Share Posted December 1, 2022 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 1, 2022 Share Posted December 1, 2022 @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! 1 Link to comment Share on other sites More sharing options...
Shaiq Posted December 1, 2022 Author Share Posted December 1, 2022 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 More sharing options...
mvaneijgen Posted December 1, 2022 Share Posted December 1, 2022 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 More sharing options...
Shaiq Posted December 1, 2022 Author Share Posted December 1, 2022 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 1 Link to comment Share on other sites More sharing options...
Shaiq Posted December 1, 2022 Author Share Posted December 1, 2022 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 More sharing options...
Solution mvaneijgen Posted December 1, 2022 Solution Share Posted December 1, 2022 @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 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted December 1, 2022 Share Posted December 1, 2022 Yep, @mvaneijgen is right, as simple as GSAP: https://stackblitz.com/edit/react-uebtwr?file=src%2FApp.js Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now