Sukru Posted February 28, 2022 Share Posted February 28, 2022 Hello, I want to add an effect like this to the project, but it doesn't work when I use it with smooth scroll. Normal effect; See the Pen rNzyRZq by GreenSock (@GreenSock) on CodePen See the Pen LYOgBjZ by sukruemanet (@sukruemanet) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 28, 2022 Share Posted February 28, 2022 Hi Sukru, You weren't passing in the correct element to the smoothScroll function, and I'm not sure why at the moment, but you need to use scrub: true. See the Pen ZEaqPBP by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Sukru Posted March 1, 2022 Author Share Posted March 1, 2022 19 hours ago, OSUblake said: Hi Sukru, You weren't passing in the correct element to the smoothScroll function, and I'm not sure why at the moment, but you need to use scrub: true. Thank you OSUblake So how can i position it in the middle of the page so it determines the styles itself, i can't interfere with css Link to comment Share on other sites More sharing options...
OSUblake Posted March 1, 2022 Share Posted March 1, 2022 You can center stuff like this, but it's not going to be correct vertically because of how your HTML is structured. You'd at least need a wrapper around that element that is 100vh and then pin that. gsap.set("#intro", { top: "50%", left: "50%", xPercent: -50, yPercent: -50, }); Link to comment Share on other sites More sharing options...
Sukru Posted March 1, 2022 Author Share Posted March 1, 2022 55 minutes ago, OSUblake said: You can center stuff like this, but it's not going to be correct vertically because of how your HTML is structured. You'd at least need a wrapper around that element that is 100vh and then pin that. gsap.set("#intro", { top: "50%", left: "50%", xPercent: -50, yPercent: -50, }); i try but not fully centered object overflowed below I made 100vh See the Pen ExbObXq by sukruemanet (@sukruemanet) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted March 1, 2022 Share Posted March 1, 2022 Then maybe try for 25% top. See the Pen NWwEXYQ by GreenSock (@GreenSock) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Sukru Posted March 1, 2022 Author Share Posted March 1, 2022 39 minutes ago, OSUblake said: Then maybe try for 25% top. Thank you very much OSUblake Link to comment Share on other sites More sharing options...
Sukru Posted March 3, 2022 Author Share Posted March 3, 2022 On 3/1/2022 at 10:18 PM, OSUblake said: Then maybe try for 25% top. Hello again OSUblake, what could be the problem with the browser on a normal phone on the desktop it doesn't seem strange Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2022 Share Posted March 3, 2022 I'm not seeing any issues on iOS or Android. What are you seeing on and what browser? Link to comment Share on other sites More sharing options...
Sukru Posted March 3, 2022 Author Share Posted March 3, 2022 3 hours ago, OSUblake said: I'm not seeing any issues on iOS or Android. What are you seeing on and what browser? i only see black background, the photo and its zoom effect are not visible Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2022 Share Posted March 3, 2022 I see it on every device I've tried. Maybe the image isn't loading on your network. 🤷♂️ There is a warning in the dev console. Quote Mixed Content: The page at 'https://cdpn.io/GreenSock/fullpage/NWwEXYQ' was loaded over HTTPS, but requested an insecure element 'http://theinfosphere.org/images/thumb/9/9e/Audience.png/900px-Audience.png'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html Link to comment Share on other sites More sharing options...
Sukru Posted March 3, 2022 Author Share Posted March 3, 2022 1 hour ago, OSUblake said: Denediğim her cihazda görüyorum. Belki resim ağınızda yüklenmiyor. 🤷♂️ Geliştirici konsolunda bir uyarı var. i cant see it in codepen link Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2022 Share Posted March 3, 2022 Do you see it here? I just swapped the image to test. See the Pen OJOdPda by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Sukru Posted March 3, 2022 Author Share Posted March 3, 2022 4 minutes ago, OSUblake said: Do you see it here? I just swapped the image to test. Ok i see now, tahnk you very much Link to comment Share on other sites More sharing options...
OSUblake Posted March 3, 2022 Share Posted March 3, 2022 Try changing the url of your image from http to https. background-image: url('http://theinfosphere.org/images/thumb/9/9e/Audience.png/900px-Audience.png'); 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