ScrollTrigger Zoom in Effect - Smooth Scroll Problem

[Sukru]

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

[OSUblake]

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

[Sukru]

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

[OSUblake]

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,
});

 

[Sukru]

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

[OSUblake]

Then maybe try for 25% top.

 

See the Pen NWwEXYQ by GreenSock (@GreenSock) on CodePen

 

[Sukru]

39 minutes ago, OSUblake said:

Then maybe try for 25% top.

Thank you very much OSUblake

 

 

 

 

[Sukru]

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

[OSUblake]

I'm not seeing any issues on iOS or Android. What are you seeing on and what browser?

 

[Sukru]

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

[OSUblake]

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

 

[Sukru]

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

[OSUblake]

Do you see it here? I just swapped the image to test.

 

See the Pen OJOdPda by GreenSock (@GreenSock) on CodePen

 

 

[Sukru]

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

 

 

 

 

 

[OSUblake]

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');