[Pin video with sliding text]

@OSUblake Thanks for responding, let me try this.

[Video pinning with vertical scrolling text]

Hi I wanted to achieve this video animation. Can anyone help me with this? Thank you so much.

https://drive.google.com/file/d/1Jgr71syEa6SOfOlw6Gw_XOTRv0ccJyb6/view?usp=sharing

[Pin video with sliding text]

I want to replicate this video animation. But I am unable to think of a way to pin and start the text animation simultaneously. I have created something with the help of docs but can't get it same. Can anyone help me with a better way to create this? Thanks for reading. 

See the Pen LYzaBdz by ayushgptaa (@ayushgptaa) on CodePen

[Fix for position sticky]

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

[Fix for position sticky]

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);
}

 

[scrollTrigger stuck/bounces for ios]

In the given like you can see that the scroll animation gets stuck for ios. Working fine of android. Below is my code.

Here is the site link : https://animationstest.vercel.app/work

 

I am also attaching the video for your reference :

 

	useEffect(() => {
		gsap.registerPlugin(ScrollTrigger);
		const boxes = gsap.utils.toArray('.Work-info');
		boxes.forEach(box => {
			gsap.from(box, {
				scrollTrigger: box,
				y: 100,
				duration: 1.2,
				opacity: 0,
			});
		});
	}, []);

 

See the Pen by work (@work) on CodePen

[Unable to implement scrollTrigger properly]

Sorry, yes it is working but the thing is now I have two timelines, one is this and the other one is the one in your answer. Is there any way to use this same timeline because having two timelines is making my app to behave a in a unpredictable way. Below is the the full code till now

 

Edit: Also stagger is not working now

 

gsap.registerPlugin(ScrollTrigger);
	const Aboutpg = gsap.timeline({ delay: 0.5, ease: 'power4.out' });
	Aboutpg.from('.aboutme h1', {
		y: 200,
		duration: 0.8,
		opacity: 0,
		skewY: 10,
	});

	const articles = gsap.utils.toArray('.aboutme article');
	articles.forEach(article => {
		let tl = gsap.timeline({ scrollTrigger: article });
		tl.from(article, {
			y: 150,
			duration: 0.8,
			opacity: 0,
			stagger: 0.2,
			skewY: 10,
		});
	});

[Unable to implement scrollTrigger properly]

Hello Cassie, thank you so much for taking time to reply this silly question, but I am still not getting what I want to achieve. As you saw in the video, all the animations are completed as soon as the page loads. I want the article that are not visible on the screen to animate when I scroll. Using your solution, it's still the same. If possible could you suggest another solution ?

 

Basically I want to do this but with timeline.........

const articles = gsap.utils.toArray('.aboutme articles');
 articles .forEach(article => {
  gsap.from(article, { 
    	scrollTrigger: article
		y: 150,
		duration: 0.8,
		opacity: 0,
		stagger: 0.2,
		skewY: 10,
  })
});

 

[Unable to implement scrollTrigger properly]

Hi I am new to gsap and I am unable to achieve what I want using scrollTrigger . I want the article that is not on page to revel animation on scroll but it gets finished with other animations. I already saw Most Common ScrollTrigger Mistakes but didn't got the answer that I wanted. Below is the code and video sample

 

	const Aboutpg = gsap.timeline({ delay: 0.5, ease: 'power4.out' });
	Aboutpg.from('.aboutme h1', {
		y: 200,
		duration: 0.8,
		opacity: 0,
		skewY: 10,
	});
	Aboutpg.from('.aboutme article', {
		scrollTrigger: '.aboutme article',
		y: 150,
		duration: 0.8,
		opacity: 0,
		stagger: 0.2,
		skewY: 10,
	});