Oleh Koval Posted January 3, 2021 Share Posted January 3, 2021 Help me solve the problem. When scrolling, the section smoothly transitions to transparent, and the bottom section overlaps it. But inside one of the section I need to fixed the element on scrolling. Why is it wrong https://prnt.sc/wfh63c works. I don't understand why it doesn't work properly. See an example. See the Pen bGwvKBZ by oleh-koval (@oleh-koval) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted January 3, 2021 Share Posted January 3, 2021 Hey @Oleh Koval, Welcome to the GreenSock Forum. I'm not sure what you're going to do. So here's just an example to show how I interpret it. See the Pen OJRvzvQ by mikeK (@mikeK) on CodePen Happy fading ... Mikel 1 Link to comment Share on other sites More sharing options...
Oleh Koval Posted January 3, 2021 Author Share Posted January 3, 2021 26 minutes ago, mikel said: Hey @Oleh Koval, Welcome to the GreenSock Forum. I'm not sure what you're going to do. So here's just an example to show how I interpret it. Happy fading ... Mikel See how this code https://prnt.sc/wfimns works in my example. This block is not fixed, but disappears first and appears at the end of the section. Although it should fixed smoothly within this section. Link to comment Share on other sites More sharing options...
mikel Posted January 4, 2021 Share Posted January 4, 2021 Hey Oleh, Hmmm, so get it 'out of the blue again' See the Pen rNMdqYM?editors=0110 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Oleh Koval Posted January 4, 2021 Author Share Posted January 4, 2021 6 hours ago, mikel said: Hey Oleh, Hmmm, so get it 'out of the blue again' Happy tweening ... Mikel I need something else. Watch this video to understand the problem https://drive.google.com/file/d/1dOhJJ7mWgf4y0OTZMiap3b6X-QTyoF3t/view?usp=sharing Link to comment Share on other sites More sharing options...
mikel Posted January 4, 2021 Share Posted January 4, 2021 hey @Oleh Koval, There shouldn't be any problems. Simply a logical process step by step. Even if I can't imagine what this process is for. See the Pen MWjVxLV by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Oleh Koval Posted January 4, 2021 Author Share Posted January 4, 2021 Hey @mikel Watch this video https://drive.google.com/file/d/1XwdBkxtBxh6JTMfsJglz3y3SmMHbdhVU/view?usp=sharing That's what it's for. Link to comment Share on other sites More sharing options...
mikel Posted January 4, 2021 Share Posted January 4, 2021 Hey @Oleh Koval, There may be other solutions. Here's a quick one. As I now interpret your planned process. See the Pen poELBpQ by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Oleh Koval Posted January 4, 2021 Author Share Posted January 4, 2021 10 minutes ago, mikel said: Hey @Oleh Koval, There may be other solutions. Here's a quick one. As I now interpret your planned process. See the Pen See the Pen poELBpQ by mikeK (@mikeK) on CodePen by mikeK (@mikeK) on CodePen Happy tweening ... Mikel You are moving in the wrong direction. See how the map https://prnt.sc/wfwlqt is fixed to the text when scrolling. Link to comment Share on other sites More sharing options...
mikel Posted January 4, 2021 Share Posted January 4, 2021 Hmmm, you should be able to fork my pen however you want. These are only suggestions and tips. 2 Link to comment Share on other sites More sharing options...
Oleh Koval Posted January 4, 2021 Author Share Posted January 4, 2021 31 minutes ago, mikel said: Hmmm, you should be able to fork my pen however you want. These are only suggestions and tips. Why does this code not work correctly if I add it to your code? ScrollTrigger.create({ trigger: ".wrap", start: "top top", end: "bottom bottom", pin: "#head02", pinSpacing: false }); I have a problem with this and EVERYTHING !!! Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 4, 2021 Share Posted January 4, 2021 2 hours ago, Oleh Koval said: Why does this code not work correctly if I add it to your code? Without you providing a demo of what you're trying it's impossible to say for sure, but my guess is because your selector string for the wrapper is wrong. You have ".wrapper" but it should be "#wrapper" because it is an ID, not a class. Keep in mind that these forums are for specific questions, not general requests to get us to build things for you Mikel has been very generous with his time but it's up to you to implement our suggestions into your site. 1 Link to comment Share on other sites More sharing options...
Oleh Koval Posted January 4, 2021 Author Share Posted January 4, 2021 21 minutes ago, ZachSaucier said: Without you providing a demo of what you're trying it's impossible to say for sure, but my guess is because your selector string for the wrapper is wrong. You have ".wrapper" but it should be "#wrapper" because it is an ID, not a class. Keep in mind that these forums are for specific questions, not general requests to get us to build things for you Mikel has been very generous with his time but it's up to you to implement our suggestions into your site. See the Pen VwKxZZW by oleh-koval (@oleh-koval) on CodePen Try scrolling through section 2. Look at the behavior of this element https://prnt.sc/wg1a5f Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 4, 2021 Share Posted January 4, 2021 Your approach is a bit confusing to me. Why are you pinning the entire #container? If you just want the headings to be pinned in the background I'd try setting it up to have each heading positioned absolutely behind the content for its respective section. Then I'd pin the heading for as long as you need it to be pinned. 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