Asored Posted May 23, 2024 Posted May 23, 2024 I'm currently stuck on something that sounds pretty simple in theory. However, I'm still having problems implementing it. In the codepen you can see the section "BOTTOM (PIN)". It currently pins as soon as it reaches the viewport. But I want the opposite behavior. How can I get the section .bottom to be pinned from the start (fixed at the bottom of the page) and, as soon as it reaches its original position, simply move up again? I've tried playing with "start" and "end", but I can't get anywhere near the result that the section is pinned from the start. Do you have any ideas? :-) See the Pen xxNOWgZ by asored (@asored) on CodePen.
mvaneijgen Posted May 23, 2024 Posted May 23, 2024 I had to restructure your HTML and CSS a bit to get things to play nice with each other. I've added a .trigger element to use as the trigger and an .endTrigger element to use as the end trigger, this element is at the same position as the .bottom element and has the same height. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! See the Pen VwOjxzG?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen. 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