Matthew Meaklim Posted November 23, 2022 Posted November 23, 2022 Hello, I've implemented a variation of the above CodePen on a website, and although it functions well for the most part, there's two things I'd like to change, but am unsure how best to do so. 1. I'd like the first panel to be visible from the get go - I don't wish to scroll to the pinned section and then have it animate in. 2. I'd like the last panel to remain visible as I scroll away - I don't wish for the last panel to disappear as I scroll away. Thanks, Matthew See the Pen ZEpKqoz by nour-darani (@nour-darani) on CodePen.
Solution Rodrigo Posted November 23, 2022 Solution Posted November 23, 2022 Hi, You can solve it with a different style for the first heading, using the Toggle Actions config properly and triggering the first header animation at the same time with the second header. Toggle Actions (from the Docs): String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". Here is a live example (thanks for the simple codepen! ?) See the Pen oNyqppN by GreenSock (@GreenSock) on CodePen. Finally your original example was using very old versions of GSAP and ScrollTrigger (3.5.x), always use the latest versions. Happy Tweening!
Matthew Meaklim Posted November 24, 2022 Author Posted November 24, 2022 Many thanks for this @Rodrigo - let's just say I was concocting one heck of an over-engineered fix... Yeah, my live site is using the latest versions of both, that was just a CodePen I had been referencing. 1
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