Jump to content
GreenSock

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

Fix for position sticky

Go to solution Solved by Cassie,

Recommended Posts

I am using gsap scrolltrigger to toggle a class that makes the container sticky. After the end of the animation when the class is removed it behaves weirdly.

Here is the video link : https://drive.google.com/file/d/12WOmmK43dFBxvVLKuDPoAGnOAT4-b76L/view?usp=sharing

As you can see in the video after the end of animation it moves it..... Is there  any fix to this ?

 

Javascript code :

const canvas = document.getElementById('hero-lightpass');
const context = canvas.getContext('2d');

const frameCount = 45;
const currentFrame = index => `./assets/medium_${(index + 1).toString().padStart(4, '0')}.jpg`;
canvas.width = 600;

const images = [];
const airpods = {
	frame: 0,
};

for (let i = 0; i < frameCount; i++) {
	const img = new Image();
	img.src = currentFrame(i);
	images.push(img);
}
console.log(canvas.width);
gsap.to(airpods, {
	frame: frameCount - 1,
	snap: 'frame',
	scrollTrigger: {
		trigger: '.sticky-wrapper',
		scrub: 0.5,
		markers: true,
		start: 'top 48px',
		end: 'center 49px',
		toggleClass: 'sticky',
	},
	onUpdate: render, 
});

images[0].onload = render;
const getheight = () => {};

function render() {
	console.log(images[0].naturalHeight);
	const h = images[0].naturalHeight;
	const w = images[0].naturalWidth;
	const aspect = h / w;
	console.log(aspect);
	canvas.height = aspect * canvas.width;
	context.drawImage(images[airpods.frame], 0, 0, canvas.width, canvas.height);
}

 

Link to comment
Share on other sites

  • Solution

Hi Ayush,

 

It's quite hard to tell without a minimal demo I'm afraid. Could you put one together for us?

A small question - is there any reason why you're toggling position sticky instead of using scrollTrigger's 'pin' option?

  • Thanks 1
Link to comment
Share on other sites

My noob ass didn't thought of that. Thanks for the solution it's working perfectly. God bless @Cassie

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