JaredD Posted August 12, 2022 Share Posted August 12, 2022 Running into issues here with understanding how to accomplish the following: Have a navbar that is always visible and fixed to the top of the screen. On some content sections have a hero type image that will start off large 400 pixel tall. As the content scrolls that hero image section shrinks down using scrolltrigger to 140px and sticks to the top of the page. But running into a couple of issues with getting this to work as I want things are shifted around and when the scrolling ends the hero sections goes back to its original size See the Pen GRxXeXw by obiyoda (@obiyoda) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted August 13, 2022 Share Posted August 13, 2022 Yeah, pinning requires managing the height/width (and other properties) of the pinned element, thus you're messing with that by making the animation affect the pinned element's height. It's almost always best to use a wrapper element as the pin and then animate the inner element. Like this: See the Pen VwXEmxa by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 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