Unable to make snapTo working (Gsap ScrollTrigger)

[romain.gr]

Hi,

 

I've been trying again and again without any success, I must be missing something.

I have a simple scrollTrigger animation, my first question is:

 

- How to make snap to work? I followed the example in the documentation which say

 

1 / (sections - 1)

 

But it never stops at 25% (50%, 75%, ...), never, I have 5 "slides", it never snaps to the center of the item. What 's my mistake?

 

Question number 2 :

 

Is there something like onStopUpdate or onStopScroll (or any other technique)? Because I'm using onUpdate to get the scroll velocity and then use the value to tweek a svg filter.

The problem is that even after stop scrolling, sometime the value stays at, let say 20 (see picture), and the filter is still applied to the element. As far as I understand, the velocity should go from 0 to something then back to 0 when stopping to scroll, if I log the velocity I never see that, It's not very smooth.

I know I could use onSnapComplete but, first, I'm unable to use snap properly, and second it won't solve my problem in case I don't use snap, and third, it's seem more like a hack rather than a true solution.

 

function servicesCarousel(){
	var numOfItem = $('.services__carousel__cell').length;
	gsap.to('.services__carousel', {
		scrollTrigger: {
			trigger: $('.services__carousel').parents('.section'),
			start: 'top top',
			end: () => {return '+=' + window.innerHeight * 1.5},
			scrub: .0001,
			pin: true,
			// markers: true,
			snap: {
				snapTo: 1 / (numOfItem - 1),
				// snapTo: [0, .25, .5, .75, 1],
				duration: {min: 0.3, max: 1},
				// directional: true,
				ease: Expo.easeOut,
			},
			onUpdate: function(self){
				var velocity = self.getVelocity();
				var velocity = velocity < 0 ? velocity * -1 : velocity;
				// var vel = gsap.quickTo('#test', 'stdDeviation', {duration: 0.4, ease: 'power3'});
				// 	vel('0 ' + velocity / 100);
				gsap.to('#test', .5, { attr: { stdDeviation: '0 ' + velocity / 100 } });
			},
			// onSnapComplete: function(){
			// 	gsap.to('#test', .5, { attr: { stdDeviation: '0 0'} });
			// }
		},
		'--rotate-x': 288 + 'deg'
	});
};

Thank you!

See the Pen jOXaKXb by pen (@pen) on CodePen

[mvaneijgen]

Lets tackle one issue at a time.

 

By default GSAP tweens have a ease of power1.in , which means it's animation will start slow and speed up at the ent, using a ScrollTrigger with scrub you almost never want that, because it can feel strange, the animation will be disconnect form the users scroll. Certainly with snap where you want things to line up exactly, this will throw off all your calculations. 

 

so setting ease:"none" to you tween fixes the issue. 

 

See the Pen abPVXEW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Velocity is not my strong suit. Because ScrollTrigger leverages the native scroll the snaps will also have velocity an thus use the same tween, I've marked the topic, so someone else will probably jump in.

[romain.gr]

Hi mvaneijgen,

 

Great, Thank you, that works perfectly!

 

For the Blur/velocity issue, I did some simple stuff that seems to work (so far). I have added a onLeave and onLeaveBack which tween the svg attr to 0, when left and also checking the velocity "power", if not enough velocity do nothing otherwise blur the stuff.

 

Here is the code :

 

servicesCarousel();

function servicesCarousel(){
	var numOfItem = $('.services__carousel__cell').length;
	gsap.to('.services__carousel', {
		scrollTrigger: {
			trigger: $('.services__carousel').parents('.section'),
			start: 'top top',
			end: () => {return '+=' + window.innerHeight * 1.5},
			scrub: .0001,
			pin: true,
			// markers: true,
			snap: {
				snapTo: 1 / (numOfItem - 1),
				// snapTo: [0, .25, .5, .75, 1],
				duration: {min: 0.3, max: 1},
				// directional: true,
				ease: Expo.easeOut,
			},
			onLeave: () => {
				gsap.to('#test', .25, { attr: { stdDeviation: '0 0'} });
			},
			onLeaveBack: () => {
				gsap.to('#test', .25, { attr: { stdDeviation: '0 0'} });
			},
			onUpdate: function(self){
				
				var direction = self.direction;
				var velocity = self.getVelocity() * direction;
				if(velocity > 300){
					// console.log('MORE THAN 300')
					gsap.to('#test', .25, { attr: { stdDeviation: '0 ' + velocity / 150 } });
				}  else {
					gsap.to('#test', .25, { attr: { stdDeviation: '0 0' } });
				}
				
			},
			onSnapComplete: function(){
				gsap.to('#test', .25, { attr: { stdDeviation: '0 0'} });
			}
		},
		'--rotate-x': 288 + 'deg',
		ease: 'none',
	});
};

And the updated pen with your advices :

 

See the Pen jOXaKXb?editors=0010 by romaingranai (@romaingranai) on CodePen

 

Thanks again !