trusty97 Posted March 24, 2021 Share Posted March 24, 2021 Hi there, i'm having trouble with absolutely positioned vertically centered content using top: 50%; transform: translateY(-50%) along with pinning using ScrollTrigger. The .box should be vertically centered (it's currently hanging at the bottom of the screen), and if you disable SrollTrigger's pin, you'll see that the item is vertically centered within that section. I'm including a codepen that demonstrates the issue. Anyone have any tips? See the Pen JjEdBJR by pdnellius (@pdnellius) on CodePen Link to comment Share on other sites More sharing options...
Visual-Q Posted March 24, 2021 Share Posted March 24, 2021 Was having a bit of trouble understanding exactly what you wanted to occur with the two scroll triggers this what you were after? See the Pen vYgNLWQ by Visual-Q (@Visual-Q) on CodePen Link to comment Share on other sites More sharing options...
trusty97 Posted March 24, 2021 Author Share Posted March 24, 2021 @Visual-Q apologies for that, almost what I'm looking for. - The first trigger animates the opacity of the box within area 3 only, and should finish animating opacity by the time Area 4 reaches the viewport. - The second trigger was intended to pin the box in the center of the screen when the top of Area 3 reaches the center of the viewport and unpin once the top of the footer reaches the bottom of the viewport. Link to comment Share on other sites More sharing options...
Visual-Q Posted March 24, 2021 Share Posted March 24, 2021 Like this? See the Pen dyNYMgP by Visual-Q (@Visual-Q) on CodePen Link to comment Share on other sites More sharing options...
trusty97 Posted March 24, 2021 Author Share Posted March 24, 2021 @Visual-Q unfortunately, this is still not what I'm looking for. - The box's opacity should go from 0 to 1 starting when the top of Area 3 reaches the center of the viewport. Additionally, box should be pinned vertically center within the viewport at this time - The box should un-pin once the top of the footer hits the bottom of the viewport Link to comment Share on other sites More sharing options...
Visual-Q Posted March 24, 2021 Share Posted March 24, 2021 Sorry wrong pen meant to post this one See the Pen YzNyqmW by Visual-Q (@Visual-Q) on CodePen Link to comment Share on other sites More sharing options...
trusty97 Posted March 24, 2021 Author Share Posted March 24, 2021 @Visual-Q still not quite there. The box should un-pin itself once the top of the footer reaches the bottom of the viewport. Link to comment Share on other sites More sharing options...
Solution Visual-Q Posted March 24, 2021 Solution Share Posted March 24, 2021 Does this do it, note as requested it starts to fade in when section 3 hits the middle however the box at that point is positioned in the center of that section which has only travelled halfway through the screen and therefore is at the bottom when it starts to become visible. See the Pen RwKWGgq by Visual-Q (@Visual-Q) on CodePen 3 Link to comment Share on other sites More sharing options...
trusty97 Posted March 25, 2021 Author Share Posted March 25, 2021 Yes! Thank you! 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