Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hightwo

image fader - how to set the height to the smallest image?

Go to solution Solved by hightwo,

Recommended Posts

Hi there!

 

I would like to have a pinned section with images on my page. Using scrolltrigger they should fade in one after the other.

 

If I have a mobile viewport and three images, all landscape but with slightly different ratios I want the container to be the height of the smallest image.

The other two being too big, can be clipped with overflow: hidden.

On landscape viewports max-height should be 100vh.

 

I am struggling when and where to find out about the height of the smallest image and set it to the container.

 

My thoughts so far:

 

- I have to wait until the images are loaded (> window.onlad) otherwise clientHeight is 0

- If I use the container as trigger, I cannot change the height anymore

- so I tried to include putting also the Scrolltrigger into the window.onload

 

However this does not resize correctly when resizing from super landscape back to portrait viewport

... and above all I expect that this is not the best option at all :-)

 

Glad about your inputs! Thanks!

 

height2.thumb.jpg.8f53b71c66d2a5a2eff7cf70446ba6f5.jpg

See the Pen RwZLMdE by hightwo (@hightwo) on CodePen

Link to comment
Share on other sites

Is there a reason that you wouldn't jus decide on a height and then place the images into <div> elements as background-image and then set background-size: cover in the CSS? 

  • Like 1
Link to comment
Share on other sites

Thanks for you quick reply, Jack!

The reason is, that it would like to use it for any set of images (except portrait ones). This means I do not know the size of the image in advance. The landscape ratio could be slightly different. Maybe a set of panorama images, maybe a set of nearly square images.

And I would like to "cut" off as little as possible from the images.

> Regarding backgroud-image: Then it's not real "part" of the sites content, right? More kind of decoration.

> Your question makes me think of an alternative:
Reading the heights of the images when selecting them in the editor that I would like to provide for this as back-end later on. Finding the smallest height and set it to the div during the creation of the site.

> However: To me it seems that should be a rather simple layout task :-) and at least without scrolltrigger the approach basically works (although I am not sure if it is recommended). The scrolltrigger then somehow seems to interferes with setting the height.

Thanks!

Link to comment
Share on other sites

Hi @hightwo

I don't see a reason why scrollTrigger would interfere with this at all. 

But that being said - this seems like overengineering to me.

Layout should be left to CSS as much as possible. I would probably just use aspectratio and object fit. Nice and simple


(Might be worth popping a min-height fallback on there for internet explorer.)

See the Pen YzxrBXy?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

8 hours ago, hightwo said:

The reason is, that it would like to use it for any set of images (except portrait ones). This means I do not know the size of the image in advance. The landscape ratio could be slightly different. Maybe a set of panorama images, maybe a set of nearly square images.

And I would like to "cut" off as little as possible from the images.

Right, but practically-speaking wouldn't you want a fairly standard height in your layout? Let's say you've got a SUPER wide panoramic image and you're on a phone screen...are you planning to figure out how to fit that panoramic image into the screen width-wise and then use that resulting height for the rest of the images which means they all may end up being like 20 pixels tall (not very visible)? I think that'd look pretty weird. 

 

Using background-image with background-size: cover doesn't make the images any less a part of the page at all. Quite the contrary - you're just letting the browser do a lot of the work for you in terms of cropping/sizing/layout. 

 

You could also just pick a standardized height, let's say 200px (or whatever), use the technique I described and then once the images load you could check the nativeWidth/nativeHeight and adjust your <div> size accordingly for all of them, and background-cover would automatically handle the cropping/placement. It just feels a lot cleaner to me, but it's totally up to you of course. Just make sure you call ScrollTrigger.refresh() AFTER you do your resizing/layout shifts to make sure it recalculates all the start/end positions. 

 

Cassie's solution looks great too (although probably not as compatible with older browsers)

  • Like 1
Link to comment
Share on other sites

Yes, I fully agree, that it would be favorable to stick with CSS for the layout. That's why the issue left me confused in the end (maybe I am really thinking too complicated :-)).
Aspect-ratio is a good point. Will keep it in mind.

Sure super-pano images make no sense 100% width on a phone screen. But the three images I used in my sketch in the initial post could be a case. All three are landscape but not exactly the same ratio. Now I could use a 16/9 aspect-ratio... but on three more or less square images I would cut off much of the images.

I thought object-fit, object-position does more or less the same like background-size. Seems I need to catch up some basics here.
And calling refresh after the resizing is a good hint!

Thank you both very much for your quick replies and the ideas! 😎
I think for the moment they will be good inputs for me to carry on.

I will update my result here.

  • Like 1
Link to comment
Share on other sites

I played around with all variations of divs with background-image, background-fit etc.

Nothing really served my desired behavior.

So I'll stick with object-fit.

 

Did some minor improvements in the JS, but the fadeTL.scrollTrigger.refresh did help a lot.

Had to add one more div (.imgcontainer), because if the trigger is the same element that I'm changing the height on (.fadebox), this doesn't work.

 

See the Pen ZEJaddW by hightwo (@hightwo) on CodePen

 

Yes, I know... still looks overengineered :-)

 

Thanks!

Link to comment
Share on other sites

  • Solution

Improvement with aspect-ratio:

 

1. calculate the aspect-ratio for each slide (slide.width / slide.height)

2. find the maximum (instead of the minHeight)

3. set the slideshow-containers aspect-ratio to the maximum

 

Now the everything is settled at the beginning and window.onresize is not required anymore.

 

So, once again thanks for your inputs. Some thoughts later they proved to be helpful! 🍻

  • Like 1
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.
×