GBrachetta

A long way of learning for me and this kind of threads help a lot. I'll see what I can do with img tags. Thanks a lot Zach!

My efforts (your help!) are showing exactly what I had in mind, and I couldn't be more grateful! But it is true that it is flickery, and somewhat shaky. Do you see the same as well? https://codepen.io/gbrachetta/pen/yLJxQpE Thank you for all!

You made my day today! Thanks to both of you really!!

I'm struggling to figure out how to do this with my own 4 images rather than the random ones from picsum! I know, I know I'm a novice!!

Yes!! that's exactly it! Wow I'll go through it right away. Many thanks Zach!! I'll try also to add the overlays animating the opacity. Maybe I found doing that difficult with a similar setting in the past!

Yes, @Zach, thanks so much. But the problem with that on iOS is that the images are all zoomed in and clipped (you can check that pen if you have an iPhone handy and will see what I mean). What made me use parallax.js is that they prevent that behaviour on iOS devices. I really wished I could just use GSAP! And @Paul, you're totally right about my repeating code. I'll give Zach's article a good look!

Thanks so much!! Indeed using a function based value for y andinvalidateOnRefresh: true makes my clumsy reload onorientationchange unnecessary, and that's great! I updated my code in case you're interested or have a better idea about how to do it more elegantly! Thank you!!

Dear Paul (@akapowl), thank you so much for your time and help. I cannot make this work anymore with my current situation regrettably. See, my parallax as it is in the original pen doesn't work well on iOS because background-size: cover displays all zoomed in, so I had to use parallax.js for that bit and kept GSAP for the overlays and text animations (that takes care of images displaying sized correctly on iOS, albeit without the parallax). The solution I came up with is https://codepen.io/gbrachetta/pen/JjKaMqr, but maybe you have a better alternative? (yTo = $(".parent-container").innerHeight() / 2;) Btw, my way to deal with a situation in which the user rotated the screen while being on that page was to reload: window.onorientationchange = () => { window.location.reload(); }; I have the feeling this is not ideal. If you think this is very clumsy, I would love to hear and see how you would do it!

I'm using this code for the animation of the paragraphs as I scroll down: gsap.to("#second-section-content", { opacity: 1, y: "500px", scrollTrigger: { trigger: ".first-overlay", start: "+=60%", end: "+=600", scrub: true } }); And this works fine on computers and phones in portrait, but I realise my y: "500px" pushes the text too far down (outside the container) on phones in landscape orientation, as you can see on the codepen example in the text "Content 2". How can I do to push those paragraphs down relative to the container, so they always stay inside the parent div regardless of screen orientation? Thank you!

I managed to fix my issue using parallax.js for the parallax divs and GSAP for the translucent overlays. I would have loved to just do it with GSAP but I'm not (yet) proficient enough to deal with it

Thank you Zach! I'll try that indeed! I'll need to do some work on the parallax script, I hope to manage, unless you would like to give me some pointers and get me started!

I have 4 divs stacked each with an img background covering the viewport, and a parallax with GSAP and ScrollTrigger that moves the images at a different speed than the scrolling as I scroll down. This works fine on all devices except iOS: after deployment, while it still works perfectly on desktop and Android, the images don't scale down on iPhone so I see a clipped portion of my images, zoomed in. I'm aware there's an issue with background-size:cover and background-attachment:fixed on iOS, but I really would love to find a way to give iOS users the right experience. I tried using background-attachment:scroll and the images look fine in that case, but then my parallax doesn't work well as it creates a gap between each div as I scroll down. Is there a way to fix this for iOS?