Nora Posted April 29, 2023 Share Posted April 29, 2023 Hello, I'm Trying to pinning text in center of screen on horizontal scroll but pin and fixed position not working.. how can I pin element on scroll horizontal? See the Pen abRydJE by noX10M (@noX10M) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted April 29, 2023 Solution Share Posted April 29, 2023 Hi, Pinning is a very complex situation and it normally works for vertical scenarios. In this case also you have a fixed position inside a transformed element and that doesn't work in the normal way fixed elements do: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children The one option I can think of is to put the element you want pinned in an absolute positioned container and then animate that one as you animate the horizontal elements, in the oposite direction. Using xPercent should make this super simple. Here is a fork of your codepen showing that approach: See the Pen poxrWJW by GreenSock (@GreenSock) on CodePen I'm pretty sure that there could be more approaches to accomplish this, but this is the one I can think of right of the bat. Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Nora Posted April 30, 2023 Author Share Posted April 30, 2023 Thank you! Link to comment Share on other sites More sharing options...
webenaco_Dev Posted February 17 Share Posted February 17 Hi everyone, starting from this example is it possible to "mask" the text in the section-1 step to make it change the color? Here I attach an example https://www.aquapetra.com/ (by scrolling there is a text section with horizontal scroll) that I would like to replicate but I don't understand the logic behind doing this animation thanks for any support Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 17 Share Posted February 17 Hi @webenaco_Dev you could do this multiple ways. The route I would go is having two layers on top of each other (with the two different colors) and then animating the CSS clip-path of the top most element. I really like the following tool to create my clip-paths https://bennettfeely.com/clippy/ and keep in mind if you want to animate between two complex strings in GSAP the strings must have the same value (eg give all numbers a % sign even if it is not needed by the browser). If you still have trouble be sure to post a minimal demo with what you've treid, that way we can see your thought process and thus better help you understand the tools! I also recommend creating a new topic and reference this one if you think it is relevant. Hope it helps and happy tweening! 2 Link to comment Share on other sites More sharing options...
webenaco_Dev Posted February 17 Share Posted February 17 Thanks @mvaneijgen, your tip on the clip path helped me find the solution! 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