hightwo Posted November 27, 2021 Share Posted November 27, 2021 Hi Greensockers! Do you know, why this works in Firefox and Chrome but not in Safari? Most probably my code will seem too complicated (as always)... but I try to explain my goal (as always : - In a longer page, I would like to one "revealbox" or more. Each of them containing an arbitrary number of images. - They should be revealed one after the other, while they are pinned. - The crux is, that all images may have different heights (please try the pen with different viewport ratios) All the demos that I found just put a given number of 100vh-divs on top of each other with position: absolute. This is clear. First I tried to solve it in a similar way with a timeline, but got confused with calculating the durations and positions in the timeline for each image (given the fact that they may have different heights). So I ended up with this solution, which seem to work in Firefox and Chrome, but not in Safari. If you know some other demo that would address my idea or suggest a better approach at all, you're welcome! Thanks! See the Pen rNGBOJy by hightwo (@hightwo) on CodePen Link to comment Share on other sites More sharing options...
hightwo Posted November 27, 2021 Author Share Posted November 27, 2021 Just saw, that it doesn't work on mobile neither... so I'll try to find another approach. Link to comment Share on other sites More sharing options...
GreenSock Posted November 28, 2021 Share Posted November 28, 2021 Here's how I'd probably handle it: See the Pen jOGNLyB?editors=0010 by GreenSock (@GreenSock) on CodePen Is that the effect you're going for? 1 Link to comment Share on other sites More sharing options...
hightwo Posted November 28, 2021 Author Share Posted November 28, 2021 Thank you Jack for the improvements! Didn't know, that I can gsap.set an entire array saves some work! Basically it's the same approach, right? Updated the code in my project and now it seems to work on Desktop-Safari as well 👍 However not always 100% correct on my iPhone (6s, Safari, Firefox or Chrome). The first time scrolling down the first time (keeping finger touched) the image is not displayed completely and I can see the second one below. Jumps to normal state after a sec or so. Same on Android. After some slow up and down scrolls it seems to work. Could this be an issue with the bottom nav bars in mobile browsers, which disappear on scroll? Or maybe some willchange: transform or anticipate pin? Link to comment Share on other sites More sharing options...
GreenSock Posted November 28, 2021 Share Posted November 28, 2021 2 hours ago, hightwo said: However not always 100% correct on my iPhone (6s, Safari, Firefox or Chrome). The first time scrolling down the first time (keeping finger touched) the image is not displayed completely and I can see the second one below. Jumps to normal state after a sec or so. Same on Android. After some slow up and down scrolls it seems to work. Could this be an issue with the bottom nav bars in mobile browsers, which disappear on scroll? Yep, that's the browser resizing issue. By default, ScrollTrigger waits for the scrolling to stop before it calls ScrollTrigger.refresh() (otherwise it would suddenly stop the scroll). You can, of course, force it to refresh() immediately upon resize by adding your own "resize" event listener but either way, you're gonna have side effects because of the very nature of the browser resizing like that. A strategy that will completely eliminate the problem is to put everything into a position: fixed element that serves as the scroller as described here: https://greensock.com/docs/v3/HelperFunctions#scrollResize 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