Scroll Trigger for loop recalculate dimensions

[LPIP]

Hi!

I have created a scroll based image gallery using ScrollTrigger Plugin, please check the codepen example. 

 

I am using a for loop to calculate the trigger start and end positions based on the height of each slide. It occurred to me that you can just use dimensions and not use a actual trigger elements which would take up unnecessary space on the page and push following elements down. essentially all the elements are stacked on top of each other position absolute. Not sure if this is how it was intended to be used or not ? 

 

This system seems to work well if there is only one instance of the page, if you resize your browser the dimensions are calculated normally, but if there are 2 or more instances of the scroll image gallery on one page it doesn't respond well to resize. the images slide change part recalculates fine but I was having some trouble with the pinning part of it , I guess my question is how do I make this so it is responsive on resize. I want to ideally have 2- 4 of these image galleries on each page they will all be height:100vh - 50px, and width:100vw. also occasionally I have noticed that the dimensions are calculated incorrectly on load , not sure why this is  . .

 

Also how do I make a function to get the current slide number and replace the number in the slide-progress-number , I tried onToggle: () => { console.log(i); } but it makes an error .

 

cheers,

 

kind regards,

CHRIS

See the Pen ZEQQwvo by chrispetro (@chrispetro) on CodePen

[GreenSock]

I'm not sure I understand your question, but when I glanced at your code it looks like you're doing a lot of work that ScrollTrigger can do for you. Part of the beauty of what ScrollTrigger does is it handles all those calculations (including on resize), so all you need to do is say start: "top top" and it will map the coordinates properly so that it starts when the top of the trigger element hits the top of the viewport. Or use any other keyword or percentage or pixel value or even relative value. Have you watched the video, read the docs, and looked at the demos? I think you'll be pleasantly surprised. 

 

When you pass in a numeric value for start and end (which you're doing in your demo), those get interpreted as exact pixel-based scroll values. If you prefer doing things that way, it's perfectly fine, but of course things may change on resize so then you'll need to set it all up again. If you use declarative instructions like "top center" or whatever, it'll dynamically calculate those. 

 

You can also use a function-based value if you'd like to dynamically calculate things yourself (on each refresh() which occurs on resize, when the page loads, and when a tab becomes active again). Like:

 

start: self => self.trigger.getBoundingClientRect().top + self.trigger.offsetHeight

Again, you can use any logic you want in there. Just return the value you want ScrollTrigger to use. 

 

Does that help?

[LPIP]

Hey Jack, thanks for the reply !

 

I think the problem that I had in the codepen I sent you was solved by changing the pin start parameter to 'top top', now when I resize it seems to correctly calculate the dimensions. I think part of what I what I was asking is like whether it's ok to not use actual trigger elements but instead just set dimensions for start and end based on container heights and offsets , and it seems to work ok. with an animation that is a whole bunch of elements stacked on top of each other , how else would you do it ? have some empty divs after the element to scroll past ?

 

I will re-read more thoroughly the documentation , and watch the tutorials to see if I can find any more info. Thanks for the assistance and thanks to GSAP for releasing this plugin.  RIP Scrollmagic. 

 

[GreenSock]

36 minutes ago, LPIP said:

I think part of what I what I was asking is like whether it's ok to not use actual trigger elements but instead just set dimensions for start and end based on container heights and offsets , and it seems to work ok.

Absolutely, ScrollTrigger accepts numeric values for start and end. If it's easier for you to set things up that way, it's totally fine. But the way you were doing it (from what I remember) wouldn't adjust at all if the window got resized. 

 

38 minutes ago, LPIP said:

with an animation that is a whole bunch of elements stacked on top of each other , how else would you do it ? have some empty divs after the element to scroll past ?

If I understand you correctly, you could do something like:

gsap.utils.toArray(".panel").forEach( (panel, i) => {
  ScrollTrigger.create({
    start: () => panel.offsetHeight * i,
    end: () => "+=" + panel.offsetHeight,
    ...
  });
});

That way, when the viewport resizes, those functions will get called again and the panel.offsetHeight would be updated (assuming the elements have responsive CSS rules like height: 100vh or something). 

 

There are actually a lot of ways you could approach it. Using empty DIVs just for spacing purposes is totally legitimate too. Let us know if you need more help.