DMT82 Posted September 1, 2020 Share Posted September 1, 2020 Hi, Im trying to pin the header until it comes to an end, and after the pinning comes to scroller-end, i want it to start to fade away with opacity: 0. But when I add pin: true or pin: "#header-text", the whole header changes positin from center of the site to top left. Why do it change position and how can I start another animation/fade when the pinning comes to an end? Thank you. See the Pen rNezqbe by DMT82 (@DMT82) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 1, 2020 Share Posted September 1, 2020 I think GSAP doesnt know what to do with CSS Grid. Pining an element is just setting it `postion` to `fixed` with some other magic. I've changed your CSS Grid to use flexbox and than it does stay in the middle. See the Pen eYZEbKP by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
DMT82 Posted September 1, 2020 Author Share Posted September 1, 2020 Thank you so much. So the problem here is between GSAP, ScrollTrigger & CSS Grid? Will check the code soon and see what you have done. Thank you once again. 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