Jump to content
GreenSock

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

Unable to implement scrollTrigger properly

Recommended Posts

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

 

Link to comment
Share on other sites


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'
});
  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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 by ayush12
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.
×