[Smooth Scrolling (Not Anchor-Jumping!)]

On 6/2/2020 at 2:17 PM, ZachSaucier said:

Hey Mario and welcome to the GreenSock forums.

 

That site is indeed made with GSAP. It was made with an old version of GSAP but many of the effects on it could be made much more easily using the new ScrollTrigger GSAP plugin  I think you're going to love the plugin!

 

Smooth scrolling (also called momentum scrolling) is possible using the ScrollTrigger plugin as Blake shows in this pen. 

 

Hey there, thanks for this pen as it helped me a lot to figure out the correct `y` value to translate.

However I wonder, how would you refresh the value on a resize?

 

I can see that ScrollTrigger's instance does update its `end` value but the `document.documentElement.clientHeight` is not updated as it was registered at the moment of the first initialisation only thus the translate keeps going to the same value, wether it needs to go further after resize or wether it creates an empty white space underneath the end of my content.

 

Edit: I was wrong, the `end` is not showing being updated in my `onUpdate` callback

 

const tl = gsap.timeline();

tl.to(refInner.current, {
	y: -(refInner.current.getBoundingClientRect().height - document.documentElement.clientHeight),
	force3D: true,
	scrollTrigger: {
		id: 'smoothScroll',
		trigger: document.body,
		start: 'top top',
		end: 'bottom bottom',
		scrub: 0.5,
	},
});

(don't mind the `refInner.current`; I'm using it with React :))

 

Do you have to kill the timeline and create a new one on each resize event so the `document.documentElement.clientHeight` always reflects the live value?

You can replicate the same issue with Blake's pen by resizing it.

Thanks!

 

Edit: After some research, I assume there's a way to update the `vars` such as described in this old post: https://greensock.com/forums/topic/12063-updating-tween-variables/

 

[Can't figure out BezierPlugin and autoRotate]

Thanks for the answer OSUblake

 

Okay so in which case does the "true" statement by itself work out?

Also I have no idea why but Math.PI / 2 seems to be a "natural" value.

[Can't figure out BezierPlugin and autoRotate]

Hello everyone,

 

I am working on a project where I mix PixiJS and GSAP to animate my canvas' content and I am encountering an issue with the BezierPlugin, more specifically its autoRotate feature.

For some reason it goes crazy when I enable it. The bezier path itself is correctly respected but the Sprite (which is a car in my app) rotates a few times on itself instead of slightly turning to indicate it's following the path.

 

The way it rotates makes me believe it might be something related to the center of origin but I can't figure out why or how to fix it (I imagine it might also be more related to PixiJS rather than GSAP).

 

You can have a look at http://haveagoodride.atvea.org/ (I know it's no CodePen, I hope it's not too much of an issue) which is my work in progress for the project. The issue I'm talking about is easily spottable but I'm talking about the vehicle moving along the path after you hit that "Let's go" button.

 

Here's how my Bezier tween is written:

path = [{x:-200, y:2000}, {x:286, y:1837}, {x:330, y:1725}, {x:330, y:1725}, {x:376, y:1669}, {x:387, y:1589}, {x:326, y:1531}, {x:242, y:1534}, {x:173, y:1519}, {x:140, y:1465}, {x:131, y:1420}, {x:155, y:1381}];
TweenMax.to(vehicle, 5, {bezier:{values:path, autoRotate:true}});

If needed to be looked into a bigger scope, it's in my app.js file, line 182.

 

What am I missing here?  Thanks!

See the Pen by (@) on CodePen