Scrolltrigger with images as slider

[luckie12 0 Likes (Newbie)]

Hi!

 

I am trying to make a scrolltrigger/slider img carousel. I just cant pinpoint on how to set the correct translateX as soon as i scroll.

When i get to the END marker, i need the images to be scrolled all the way to the left, but keep the images in the viewport and keep the very last image on the right hand side

 

I hope that someone can help me with this 'calculation'!

 

Thanks!

See the Pen VwERxZw by luckie12 (@luckie12) on CodePen

[Cassie 5,650 Likes (Superhero)]

Heya!

 

Something like this should do you ☺️

See the Pen yLRwEEN?editors=1010 by GreenSock (@GreenSock) on CodePen

[luckie12 0 Likes (Newbie)]

1 hour ago, Cassie said:

Heya!

 

Something like this should do you ☺️
 

 

Hey thats amazing!

 

I was close with the ''calculation'' but this is even nicer! Thanks!!!

 

Is it also possible that it does not hug my scrollwheel, but just according to the start and end that i had it scrolls between there? So without the alot of scrolling and standing still, but the same movement as my example codepen has, but then keep the start and end on the same spot ? Gonna save your example though, love it

[Ponz 1 Likes (Newbie)]

Hi!

I found this code and I immediately tried to use it in my project because it was exactly what I needed.. it wasn't easy to implement gsap in Elementor but it seems to me it works well enough except for a strange behavior at the end of the scroll.. could you help me to solve this?..

 

my site

 

my code is:

<script>
	;(function(){
			var chck_if_gsap_loaded = setInterval(function(){
			if(window.gsap && window.ScrollTrigger){
					gsap.registerPlugin( ScrollTrigger );
					myfunction();
					clearInterval(chck_if_gsap_loaded);
					}
			}, 500);
			
			function myfunction(){

				
let cont = document.querySelector("#container");
gsap.to(".slide", {
  ease: "none",
  x: () => -(cont.scrollWidth - window.innerWidth),
  scrollTrigger: {
    trigger: cont,
    pin: cont,
    start: "center center",
    end: () => "+=" + (cont.scrollWidth - window.innerWidth),
    scrub: true,
    invalidateOnRefresh: true,
    markers: true,
  }
});
				
			}
})();

</script>

 

[Ponz 1 Likes (Newbie)]

Found the solution! ..it was an Elementor transition property.. 

Thanks for the code!

 

[luckie12 0 Likes (Newbie)]

9 hours ago, Ponz said:

Hi!

I found this code and I immediately tried to use it in my project because it was exactly what I needed.. it wasn't easy to implement gsap in Elementor but it seems to me it works well enough except for a strange behavior at the end of the scroll.. could you help me to solve this?..

 

my site

 

my code is:

<script>
	;(function(){
			var chck_if_gsap_loaded = setInterval(function(){
			if(window.gsap && window.ScrollTrigger){
					gsap.registerPlugin( ScrollTrigger );
					myfunction();
					clearInterval(chck_if_gsap_loaded);
					}
			}, 500);
			
			function myfunction(){

				
let cont = document.querySelector("#container");
gsap.to(".slide", {
  ease: "none",
  x: () => -(cont.scrollWidth - window.innerWidth),
  scrollTrigger: {
    trigger: cont,
    pin: cont,
    start: "center center",
    end: () => "+=" + (cont.scrollWidth - window.innerWidth),
    scrub: true,
    invalidateOnRefresh: true,
    markers: true,
  }
});
				
			}
})();

</script>

 

 

3 hours ago, Ponz said:

Found the solution! ..it was an Elementor transition property.. 

Thanks for the code!

 

maybe uhm, next time start your own post and dont hijack this one? Thanks!

[Cassie 5,650 Likes (Superhero)]

People are welcome to chime in on others posts - there's space to help everyone!

 

And yeah, sure, you can change the properties to whatever you need. I just copy-pasted your start and end and scrub value in - Is that what you're after?

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

[jwb009 0 Likes (Newbie)]

Adding on to the idea in this post, any idea @Cassie why the ScrollTrigger always ends too soon on my version of this? I will have n-number of items in a CSS Grid and it doesn't seem to calculate the width correctly (open the Pen in a full page view to see the error).

 

See the Pen bGmZLyb?editors=1010 by lab929 (@lab929) on CodePen

 

 

[Cassie 5,650 Likes (Superhero)]

Not quite sure what you mean there. We're moving the container by the entire scroll width - you can see the last block at the end. I added "last" to the last two block.

What do you mean by 'ends too soon' - What are you expecting to happen? Are you talking about the end trigger not having enough space to scroll into? 

If so - that's to do with page length not the calculation in the tween. Look into start and end triggers ✨

See the Pen qBJwZxm?editors=1000 by GreenSock (@GreenSock) on CodePen

[jwb009 0 Likes (Newbie)]

Thanks for the quick reply. Yes, by ends too soon I meant 'end' wasn't reaching 'scroller-end' before the page scrolled to the bottom, as in the attached screenshot. I see you've added spacers to prevent that.

[jwb009 0 Likes (Newbie)]

In this screenshot on my dev setup with this same code, you can see that 'end' has passed 'scroller-end' (the text is hard to see in the middle of the image) but there is still a lot of content in the container that never gets scrolled into view. And there is plenty of space below the images.

 

 

[Rodrigo 5,889 Likes (Superhero)]

Hi,

 

As far as I can see the codepen in Cassie's last post seems to work the way you expect. If you have other specs in your setup then be sure to include or them in your minimal demo in order to get a better idea of what you're trying to do.

 

Maybe the issue could be your HTML and CSS more than a GSAP specific problem. First try to create an HTML/CSS setup that looks the way you intend, then start creating your animations without ScrollTrigger. Once your animations do exactly what you want, then add ScrollTrigger to the mix.

 

Happy Tweening!