Dennyno Posted October 6, 2022 Share Posted October 6, 2022 Hi all, Im losing myself in an inch of water! I need to transform the origin of the canvas on my demo and pin it, till the end of the document, then reverse everything when I scroll again near the very top. To fake the perspective I used a clip-path (even I guess that using something like: transformOrigin: "-500% 50% -100px", rotationY: 25,z: 500 m May work even better for the cause. Btw what's the problem of the jumping pin? Thanks See the Pen ExLeWvx by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 7, 2022 Share Posted October 7, 2022 Hi, Super cool effect!! The problem is that when the element enters back, the top position is 0 and then jumps to 50%, which is what is set in the animation. You can use the onEnterBack callback to set the top position at 50% preventing the jump. let clip_polygon = gsap.timeline({ scrollTrigger: { trigger: skew, start: "top top", //end: 'end' , scrub: true, pin: true, pinSpacing: false, onEnterBack(){ gsap.set(skew, { top: "50%", }); }, } }); Let us know how it works. Happy Tweening! Link to comment Share on other sites More sharing options...
Dennyno Posted October 7, 2022 Author Share Posted October 7, 2022 Hi @Rodrigo, thanks! But even this, doesnt work! Maybe it's my markup the problem.. I dont understand, I was trying also using flexblox and aligning to the center, neither that seems the right solution. Btw thanks for sharing an idea Link to comment Share on other sites More sharing options...
Dennyno Posted October 7, 2022 Author Share Posted October 7, 2022 Tried playing here and there, but I'm still missing something... Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 7, 2022 Share Posted October 7, 2022 I don't get what is going on. I had opened this topic looked at your code and saw a 1000 lines of JS, on which I immediately closed it. Now I had some spare time and looked at it again. I had to first remove all your canvas code to even see what was going on. The effect is cool, but it's really hard to debug something with so much code! I see that the canvas element gets unpinned when the end trigger is triggered. Is that your issue? Why not fully collapse the clipPath instead? See the Pen QWrVeQB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Dennyno Posted October 7, 2022 Author Share Posted October 7, 2022 @mvaneijgen Need to keep your yellow element (on my example the canvas, or it’s container) pinned. always pinned. like an opening door at 3/4.. 🚪 Fixed on that position till the end on scrolling, then again, reverse the animation when reaching the top, but this element must always stay fixed there… Reference: https://avanzare.eu/reframe_wp/demo/ (Mobile view) Thanks Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted October 7, 2022 Solution Share Posted October 7, 2022 Having it pin with ScrollTrigger will remove it's pin as soon as the end trigger is surpassed. Just set its position fixed with CSS and removed the pinning with ScrollTrigger., then it will be always fixed. With position fixed it will be not part of the flow of the document, so if you want the content to start later you'll have to add another element with the same height as the canvas element. See the Pen qBYJBMg by mvaneijgen (@mvaneijgen) on CodePen 3 Link to comment Share on other sites More sharing options...
Dennyno Posted October 7, 2022 Author Share Posted October 7, 2022 Wow! Thanks! @mvaneijgen Yep, now I see bright! How to start reversing the animation only when reaching again the top? top -=400px (for example) Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 7, 2022 Share Posted October 7, 2022 You could look in to the once property to only play it once and the onEnterBack or onUpdate call back to check when it should animate back. I'm on my phone at the moment, so I can't do more at the moment 1 Link to comment Share on other sites More sharing options...
Dennyno Posted October 7, 2022 Author Share Posted October 7, 2022 Thanks, I tried with the "once' property, and it freeze as I wished, now.. how could the onEnterBack work if is something that never enters back? Is something conditional that Im missing I guess... I maybe need to use also a scrollTo plugin, with something like if scrollTo Y:0 than reverse the animation? (EDIT: not only the animation, but the whole timeline I guess, as I need go allow users going again back and forth . up and down) See the Pen rNvqLWG by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted October 8, 2022 Share Posted October 8, 2022 Hi @Dennyno, What you could do is create a another ScrollTrigger instance that doesn't have any animation associated to it, using a proxy element that just sits there in the DOM. Also, instead of using the once property in the animation, use the disable method in the onLeave callback and with the proxy ScrollTrigger enable the animation ScrollTrigger and reset the animation progress manually. Here is an example, just check the changes in the HTML and CSS to see where I added that extra DOM node and the styling (which is pretty straight forward): See the Pen ExLdLzx by GreenSock (@GreenSock) on CodePen Of course the animation and general intention might need a bit of tinkering, but hopefully this will provide an idea to solve the issue. Let us know how it works. Happy Tweening! 1 1 Link to comment Share on other sites More sharing options...
Dennyno Posted October 10, 2022 Author Share Posted October 10, 2022 Totally agree and that's a fkin' great solution! I did something different, basically adding an extra pin on top of the dom, but your way seems also great! Thanks @Rodrigo See the Pen OJZBOYX by DedaloD (@DedaloD) on CodePen 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