Need Help with Scrolltrigger responsiveness

[mmarco]

Hi, so im trying to make a site where i have tiles that are animated by a scrolltrigger.
The tiles should come in from the left side and fade in as they do so.

I've managed to do that, but my problem is that on different sized screens the scrolltrigger starts at different times, for example on a small screen like a phone the first tile isnt visible at all at the top of the page, but on a very large screen you dont even need to scroll and all the tiles are visible, ive recreated my issue in this stackblitz template:
https://stackblitz.com/edit/sveltejs-kit-template-default-vyjuth?file=src%2Froutes%2F%2Bpage.svelte

I would appreciate some help, ive tried using viewport units and % but i just cant seem to get it right... what i would want is that the first tile should be a bit visible at first, like halfway, then as you scroll down the first tile should become fully visible and the others after, and that should stay the same for every size screen.

Thanks in advance

[mvaneijgen]

Check out https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ with it you can write media queries for you GSAP code. You can also look in to the clamp() method in ScrollTrigger, see the video below 

 

 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
 

And last thing you're making one of the most comment GSAP mistakes, see https://gsap.com/resources/mistakes/#using-css-transitions-and-gsap-on-the-same-properties this css should not be on the .tile element     transition: transform 0.3s ease... the background is fine, because this is not something GSAP is animating at the moment. 

 

Hope it helps and happy tweening! 

 

 

 

[mmarco]

16 minutes ago, mvaneijgen said:

Check out https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ with it you can write media queries for you GSAP code. You can also look in to the clamp() method in ScrollTrigger, see the video below 

 

 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
 

And last thing you're making one of the most comment GSAP mistakes, see https://gsap.com/resources/mistakes/#using-css-transitions-and-gsap-on-the-same-properties this css should not be on the .tile element     transition: transform 0.3s ease... the background is fine, because this is not something GSAP is animating at the moment. 

 

Hope it helps and happy tweening! 

 

 

 

Hi, thank you so much! clamp worked as expected! The video was really helpful, if you have a bit more time to look at this, if i use the responsive feature in my browser and use the "4K Screen" Size, All the elements are already in view, except for that size this isnt a problem on any other screen... do you have an elegent solution for this?

For some reason when i wrap my start and end values in clamp on the stackblitz template it doesnt work...
 

[Rodrigo]

Hi,

 

I forked your demo and tried on a 4k resolution on devtools (my monitors are both 1920x1080) and the issue is that the end trigger of your ScrollTriiger config has already passed the end point:

 

Also most likely these two points are passing at the same time so everything should be pretty much instantaneous, so you should review those values and use media queries on your CSS as well.

 

Hopefully this clear things up

Happy Tweening!