Jump to content
Search Community

Scrolltrigger with images as slider

luckie12 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

SCR-20230526-nrkp.png

Link to comment
Share on other sites

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.SCR-20230526-nwpw.thumb.jpeg.cda58f5b9acf37ae3ddb8289853b5de6.jpeg

 

 

Link to comment
Share on other sites

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!

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...