yulia Posted June 29, 2020 Share Posted June 29, 2020 Hello! I'm trying to pin an element at the bottom of the screen until its parent element scrolls to the end. It should work something like this: This only works if initially the block with the text is at the top of the block with the picture. But then the block with the text sticks at the top of the screen. I need the opposite - the block with the text should be below the block with the picture. When the picture appears, the text should be pinned at the bottom of the screen and unpinned when the picture is completely scrolled. Please, help. ScrollMagic support doesn't seem to work Example of my code: initScene: function(trigger, animate, duration, hook) { // Declare Scene const scene = this.$scrollmagic.scene({ // ID of element where animation starts triggerElement: trigger, // {0,0.5,1} - animations starts from {top,center,end} of window triggerHook: hook, // Duration of animation duration: duration, reverse: true }) // Declaration of animation and attaching to element .setPin(animate, { pushFollowers: false }) // Add Scene to controller this.$scrollmagic.addScene(scene) } this.initScene('#trigger1', '#animate1', 300, 0) Link to comment Share on other sites More sharing options...
mikel Posted June 29, 2020 Share Posted June 29, 2020 Hey @yulia Did you see this post? 1 1 Link to comment Share on other sites More sharing options...
yulia Posted June 29, 2020 Author Share Posted June 29, 2020 @mikel Thanks for sharing this link! I wanted to make this animation with a ScrollMagic. I will use this option if I do not solve with a ScrollMagic. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 29, 2020 Share Posted June 29, 2020 Hey @yulia. ScrollMagic is not a GreenSock product and we don't recommend using it. We highly recommend ScrollTrigger as it has a smaller file size, a bunch of additional features, an easier API, and is our official scroll plugin. Why not use it? 1 Link to comment Share on other sites More sharing options...
yulia Posted June 29, 2020 Author Share Posted June 29, 2020 @ZachSaucier @mikel Thanks a lot guys) I already read the documentation and decided that I would redo my animation with ScrollTrigger! 3 Link to comment Share on other sites More sharing options...
yulia Posted June 30, 2020 Author Share Posted June 30, 2020 Sorry, but I don’t understand how to set the top of the green container as a trigger? I only see the possibility of making the bottom of the green container as a trigger. I need .sticky pinned bottom when the .green container touches the top of the screen. And .sticky should unpin when the bottom of the .green container touches the top of the screen See the Pen pogWYOG by yuliarushay (@yuliarushay) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted June 30, 2020 Share Posted June 30, 2020 Hey @yulia, I am not sure that I am interpreting your intention correctly See the Pen MWKEdmv by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 1 Link to comment Share on other sites More sharing options...
yulia Posted June 30, 2020 Author Share Posted June 30, 2020 @mikel This is almost what I want! Thank you) I only need that after the animation, the #sticky container becomes position: relative and remains under the #green container when I scroll down the page further. Then, when scrolling to the top of the page, everything should be repeated in the opposite direction (like on gif) Link to comment Share on other sites More sharing options...
mikel Posted June 30, 2020 Share Posted June 30, 2020 Hey @yulia, Play with this code See the Pen wvMrVGQ by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 1 1 Link to comment Share on other sites More sharing options...
yulia Posted June 30, 2020 Author Share Posted June 30, 2020 @mikel Wooow! Thank you very much, exactly what I need 😘 1 Link to comment Share on other sites More sharing options...
yulia Posted July 6, 2020 Author Share Posted July 6, 2020 Hello again! I'm currently trying to achieve a result without absolute or fixed positioning. The problem is that the block with the text leaves the field of view. When I scroll the page up, this block appears back only at the top. Is there any way to fix this? Thank See the Pen NWxymGa by yuliarushay (@yuliarushay) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 6, 2020 Share Posted July 6, 2020 The main problem is that the default ease is "power1.out" but your effect would require a linear ease. Just set ease: "none" and that should resolve it. Also, you can simplify this: // OLD transform: 'translateY(' + triggerHeight.offsetHeight + 'px' + ')', // NEW y: triggerHeight.offsetHeight, Is this what you want? See the Pen 4921a7e4e9fbe42353a2d47064275128?editors=0010 by GreenSock (@GreenSock) on CodePen Just beware that the reason ScrollTrigger does pinning with position: fixed is because most browsers handle the scrolling of the main page on a different thread, so if you try to accomplish it the way you're doing it (with just transforms), you can experience some "jitter" because the updates aren't synchronized. Might not be noticeable in every situation, though. I just figured I'd mention it. I didn't notice any jitter in your demo (at least in Chrome on my Mac). 2 1 Link to comment Share on other sites More sharing options...
yulia Posted July 6, 2020 Author Share Posted July 6, 2020 @GreenSock This is exactly what I needed! Thank you:) In the comments above, there was a great solution by @mikel with a fixed position, but on some tablets, switching between absolute positioning and fixed positioned for some reason does not work. I hope this solution will be displayed correctly everywhere 🤞 Link to comment Share on other sites More sharing options...
yulia Posted July 7, 2020 Author Share Posted July 7, 2020 Hope this is the last question. I have a problem with the position of the elements after changing the screen orientation. If you change the screen orientation before the animation is completed, glitches begin. Elements move to other positions, jump and move to their places only when I scroll up / down the page. Normal view (left) \ Glitch view (right) Screenshot It doesn’t help: window.onresize = ScrollTrigger.refresh(); / window.onresize = ScrollTrigger.update(); Link to comment Share on other sites More sharing options...
GreenSock Posted July 7, 2020 Share Posted July 7, 2020 Are you sure actually called ScrollTrigger.refresh()? The code you posted would NOT accomplish that. // BAD window.onresize = ScrollTrigger.refresh(); // this calls refresh and sets onresize to the RESULT (returned value) // GOOD window.onresize = ScrollTrigger.refresh; // sets it to the actual function itself But ScrollTrigger automatically calls refresh() on resize anyway, so you shouldn't really need to make that call. I'm not sure what to tell you, though, because you didn't provide a reduced test case. I'm not sure what's happening. I wish I could help more. Link to comment Share on other sites More sharing options...
yulia Posted July 7, 2020 Author Share Posted July 7, 2020 @GreenSock oops, thank https://klianto-site-stg.smartex-it.com If you look at the page on the iPad Pro (or simulate) and change the screen orientation in the middle of the scroll animation of text blocks, you will see a problem I think Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 7, 2020 Share Posted July 7, 2020 In general it's best to avoid directly using callbacks like .onresize because they might get overwritten by other scripts. You should try to stick to .addEventListener() instead whenever possible. 8 hours ago, yulia said: https://klianto-site-stg.smartex-it.com If you look at the page on the iPad Pro (or simulate) and change the screen orientation in the middle of the scroll animation of text blocks, you will see a problem I think It's really hard for us to debug on a live site. It'd be really handy if you recreated the issue using the minimal amount of code necessary using CodePen. I don't even know what section of the site you're talking about. 3 Link to comment Share on other sites More sharing options...
yulia Posted July 21, 2020 Author Share Posted July 21, 2020 Thanks everyone for the advice 😍 It seems the problem was with the absolute positioning of the elements. I made it on grids and now there are no bugs. 1 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