Unable to implement scrollTrigger properly

[ayush12]

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

 

[Cassie]

Hi Ayush,

Welcome to the forums. If you're just getting started, the examples at the top of the docs page will likely be more helpful than that article.

https://greensock.com/docs/v3/Plugins/ScrollTrigger

In your case - you'll need to put the reference to scrollTrigger in your timeline instead of a child tween.
 

const Aboutpg = gsap.timeline({ 
  delay: 0.5, 
  ease: 'power4.out', 
  scrollTrigger: '.aboutme article'
});

[ayush12]

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

 

[Cassie]

Have you tried configuring the scrollTrigger - adding markers and seeing where the start and end points are?

It's tricky for us to suggest solutions without seeing your setup, which is why we ask for a minimal demo to be posted along with questions.

If you're struggling to understand how scrollTrigger works I really recommend watching the video at the top of the docs!
 

const Aboutpg = gsap.timeline({ 
  delay: 0.5, 
  ease: 'power4.out', 
  scrollTrigger: {
    trigger: '.aboutme article',
    markers: true,
    start: "top top", // when the top of the trigger hits the top of the viewport
    end: "+=500", // end after scrolling 500px beyond the start
  }
});

 

[Cassie]

Ah, just saw your edit.

If you add additional questions please thread them because we don't get 'edit' notifications!

If I understand correctly you just have to add the scrolltrigger to your timeline like so - 
 

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

 

[ayush12]

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

Edited September 20, 2021 by ayush12