Jump to content
GreenSock

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

How to make carousel (slider) stop when the mouse pointer has hovered over on the image in GSAP?

Recommended Posts

Hey there @Varshath,

 

You can call animation.pause() on a mouseEnter event and animation.play() on mouseLeave

 

Hope this helps!

Link to comment
Share on other sites

hey @Cassie,

I have tried your method but not working,

document.getElementById("slide").onmouseenter = function() {mouseEnter()};
document.getElementById("slide").onmouseleave = function() {mouseLeave()};

function mouseEnter() {
  animation.pause();
}

function mouseLeave() {
animation.play();
}

 

Link to comment
Share on other sites

Oh ok! I see there's a delayed call -  apologies.

There's a few things in your pen that weren't behaving as I was expecting and I don't have time to dig into it. So I've forked this pen instead and added a pause on the timer - it's using GSAP 3 and should have all the functionality you need now.

See the Pen JjrWXNq?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

Hello Cassie,

 

I would like to animate two separate things at the same time - pictures (in your examples the numbered slides) and text (in my case). The animation effect is just vertical and shall happen at the same time

 

And I would like to start (onEnter) and stop (onLeave) the animation with help of ScrollTrigger.

My question is - shall I put both in a timeline to get the right result or how can I achieve this goal? 

 

My code looks like this by now and it works so far but I'm sure that it's not the best-practice-one. 😊 In generall, I would like to know if I can make the code more best-practice-like. If you have any suggestion I would be happy to learn something new. Thank you. :-) 

 

In my case I don't use any navigation for the slides - maybe I have to remove more from the original code like proxy settings?

 

// Start page slider
var sliderPictures = document.querySelectorAll('.section-background-overlay .section-background-overlay_background-image picture')
var sliderTexts = document.querySelectorAll('.section-background-overlay .overlay .text-wrapper')
var slideCont = document.querySelector(".section-background-overlay .overlay")
var slideDelay = 5;
var slideDuration = 1;
var snapX;

function heroSliderStart() {
	
	var progressWrap = gsap.utils.wrap(0, 1);
	
	var numSlidesPicture = sliderPictures.length;
	var numSlidesText = sliderTexts.length;
	
	gsap.set(sliderPictures, {
  		yPercent: i => i * 100
	});
	
	gsap.set(sliderTexts, {
		  yPercent: i => i * 100
	});
	
	var wrap = gsap.utils.wrap(-100, (numSlidesPicture - 1) * 100);
	var wrapText = gsap.utils.wrap(-100, (numSlidesText - 1) * 100);
	var timer = gsap.delayedCall(slideDelay, autoPlay);
	
	
	var animation = 
		gsap.to(sliderPictures, {
		  yPercent: "+=" + (numSlidesPicture * 100),
		  paused: true, 
		  duration: 1,
		  ease: "none",
		  repeat: -1,
		  modifiers: {
			yPercent: wrap
		  }
	})
	
	var animation2 = 
	gsap.fromTo(sliderTexts, {
		  autoAlpha: 1,
		  paused: true, 
		  duration: 1,
		  ease: "none",
		  repeat: -1,
	  	},
		  {
			yPercent: "+=" + (numSlidesText * 100),
			  autoAlpha: 1,
			  paused: true, 
			  duration: 1,
			  ease: "none",
			  repeat: -1,
			  modifiers: {
				yPercent: wrapText
			  },  
		  }
	);

	
	var proxy = document.createElement("div");
	var slideAnimation = gsap.to({}, {});
	var slideWidth = 0;
	var wrapWidth = 0;
	resize();
	
	window.addEventListener("resize", resize);
	
	slideCont.addEventListener("mouseenter", function() {
  		timer.pause()
	});
	
	slideCont.addEventListener("mouseleave", function() {
  		timer.play()
	});
	
	
	function animateSlides(direction) {
		
  		timer.restart(true);
  		slideAnimation.kill();
  		
  		var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
  		
  		slideAnimation = gsap.to(proxy, {
			x: x,
			duration: slideDuration,
			onUpdate: updateProgress
  		});  
	}
	
	function autoPlay() {  
  		animateSlides(-1);
	}
	
	function updateProgress() { 
  		animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
		animation2.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
	}
	
	function resize() {
  	
  		var norm = (gsap.getProperty(proxy, "x") / wrapWidth) || 0;
  		
  		slideWidth = sliderPictures[0].offsetWidth;
  		wrapWidth = slideWidth * numSlidesPicture;
  		snapX = gsap.utils.snap(slideWidth);
  		
  		gsap.set(proxy, {
			x: norm * wrapWidth
  		});
  		
  		animateSlides(0);
  		slideAnimation.progress(1);
	}
}

function heroSliderStop() {
	timer.pause()
}	

ScrollTrigger.create({
	trigger: '.section-background-overlay',
	onEnter: heroSliderStart,
	onLeave: heroSliderStop,
});

Notice: the function heroSliderStop() doesn't work now. I need to figure out how to stop the running animation. 

Link to comment
Share on other sites

Hi Jenda,

 

If you need help, please provide a demo. It's extremely difficult to look at a code snippet and understand a question that is based on something UI related. Even better, start a new topic in the normal GSAP forum as this forum is for banner ads.

 

8 hours ago, jenda said:

My code looks like this by now and it works so far but I'm sure that it's not the best-practice-one. 😊 In generall, I would like to know if I can make the code more best-practice-like. If you have any suggestion I would be happy to learn something new. Thank you. :-) 

 

My advice would be to not worry about "best practices". There is no one-size-fits-all approach when it comes to coding. What may work well in one situation can completely fall apart in another situation. 

 

To learn more, I would suggest deconstructing all that code you posted and figure out what every line of code does and why it's important. Hint: the proxy stuff is only for used Draggable, which it doesn't look like you are using.

 

Link to comment
Share on other sites

Hello, thank you for your response. I created a codepen preview.

  1. My goal is to animate the text and number element separetly which already works.
  2. Additionaly, I would like to animate the content of the text block as soon as the parent text element comes into the viewport.
  3. The bulletpoints shall go to the right position. I guess there is something wrong why they don't show the right slide(s).
  4. The last goal I have is to start the animation as soon as the slider comes into the viewport - with help of ScrollTrigger. 

Could somebody give me some advices how to archive my goals. I think there are just few thinks to change but I stuck by now. 

 

See the Pen bGYOmad by jankout (@jankout) on CodePen

Link to comment
Share on other sites

On 3/9/2022 at 8:27 AM, jenda said:
  • My goal is to animate the text and number element separetly which already works.
  • Additionaly, I would like to animate the content of the text block as soon as the parent text element comes into the viewport.
  • The bulletpoints shall go to the right position. I guess there is something wrong why they don't show the right slide(s).
  • The last goal I have is to start the animation as soon as the slider comes into the viewport - with help of ScrollTrigger. 

 

Please keep in mind that these forums are meant for GSAP-specific questions, not general logic troubleshooting or "here are my list of requirements, please make my project work for me" requests. See the forum guidelines

 

And if you're trying to make that vertical, then you would need to change all the horizontal stuff, like you wouldn't use widths as it would be based on heights.

 

Link to comment
Share on other sites

Thank you for your response. Of course, I don't expect that somebody will do my work here. :-) I need help with some things that don´t work propertly now. 

  1. The bulletpoints navigation don't work correctly although I took the code from another example. I guess there is a problem with the infinite animation that's why navigation points don't know where the progress currently is. For this reason I took another example and adjusted. The navigation works there correctly. But I guess the code could be written more GSAP-like, isn't it?  
  2. My open question is: How can I achieve to animate as soon as a slide comes into the view point or as soon as it will be slide? I guess I should use ScrollTrigger. Do I? 

See the Pen zYPgWyo by jankout (@jankout) on CodePen

Link to comment
Share on other sites

8 hours ago, jenda said:

The bulletpoints navigation don't work correctly although I took the code from another example. I guess there is a problem with the infinite animation that's why navigation points don't know where the progress currently is.

 

The problem was that the slider you were using was for horizontal movement. That's why I said you would need to convert anything that x/width related and use y/height instead. 

 

8 hours ago, jenda said:

My open question is: How can I achieve to animate as soon as a slide comes into the view point or as soon as it will be slide? I guess I should use ScrollTrigger. Do I? 

 

ScrollTrigger is for scrolling. You would need to do the animation you want inside that nextSlide function.

 

  • Like 1
Link to comment
Share on other sites

Hello, yes, you are right. :-)

 

Is there any possibility to pause and play a function I defined? I would like to do it for two mouse events - mouseenter (pause) and mouseleave (play) but I don't you any timeline now. I only found this command. I need it for the last example I posted here.

 

I've achieved to stop the animation with following code. But after I call this function with my mouse and use the bulletpoints the animations get confused. What do I wrrong there? 

 

slideTextWrapper.addEventListener("mouseenter", function(){
			timer.pause();
		})
		
		slideTextWrapper.addEventListener("mouseleave", function(){
			timer.play();
		})

I puted there 3 times. But I guess it would be possible to call just once, right? I can also see a little speed difference between the text and image animation. Shall I set there something else to let start and end both animation simultaneously? 

 

Here is my example again. 

 

See the Pen zYPgWyo?editors=0011 by jankout (@jankout) on CodePen

 

Link to comment
Share on other sites

 

Hey @jenda,

 

To cancel/kill a delayed call, save a reference to it and then call .kill() on it when needed.

And create a new on mouseleave.

 

See the Pen 8b42610a1c2e75dc0a8b660fdbb15cac by mikeK (@mikeK) on CodePen

 

Does it help?

 

Happy tweening ...

Mikel

  • Like 4
Link to comment
Share on other sites

Hello @mikel, yes, it helped me. Thank you very much. 😊

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
On 12/15/2021 at 7:56 AM, Cassie said:

Oh ok! I see there's a delayed call -  apologies.

There's a few things in your pen that weren't behaving as I was expecting and I don't have time to dig into it. So I've forked this pen instead and added a pause on the timer - it's using GSAP 3 and should have all the functionality you need now.
 

 

 

Link to comment
Share on other sites

On 12/15/2021 at 7:56 AM, Cassie said:

Oh ok! I see there's a delayed call -  apologies.

There's a few things in your pen that weren't behaving as I was expecting and I don't have time to dig into it. So I've forked this pen instead and added a pause on the timer - it's using GSAP 3 and should have all the functionality you need now.
 

 

 

Link to comment
Share on other sites

Wow, I'm amazed by gsap

well, first question in my mind, Do you think it's a good idea to use gsap for a simple slider as the one @Cassie did?

Link to comment
Share on other sites

I think you're asking quite a biased sample group - but yes!

Link to comment
Share on other sites

Of course, I understand your point that you can be biased, but as a superhero is also your role to tell when people don't use your product for the right use.
 
I just did a full custom slider, but I came back to a slider library because there are a lot of things to think about when you create a slider. If I know it 2 weeks before that gsap could be used for that, my slider maybe will exactly as I wanted..

but anyway, always good to have feedback, even if it's biased  😆

  • Like 1
Link to comment
Share on other sites

If you're pressed for time then a slider library may be quicker and more easily configured.

But you'll always get more animation control with GSAP. Depends what you're after.

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