Jump to content
Search Community

Reveal pinned images with different heights (not just all the same 100vh sections)

hightwo test
Moderator Tag

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...