Jump to content
Search Community

Scrolltrigger Timeline forEach wrong timing

Unbekannter test
Moderator Tag

Recommended Posts

Hello dear team,
unfortunately I have been trying to solve a problem for some time.

 

I would like the timeline to start with the fade-in of the comments only when Section 3 is complete.

 

Furthermore, the comments should be placed around the headline of Section 3. Currently I use "position: absolute;" for this, then fade the comments but not in the correct order. I've tried other options like transform, margin, but they all change the flow.

 

I hope you can help me. Many Thanks.

 

Greats Chris

See the Pen dyOBOXd by unbekannter (@unbekannter) on CodePen

Link to comment
Share on other sites

Hey Unbekannter and welcome to the GreenSock forums.

 

First off, you're making one of the most common GSAP mistakes and one of the most common ScrollTrigger mistakes: using the old GSAP syntax and including ScrollTriggers in tweens within timelines. 

 

I recommend upgrading to the GSAP 3 syntax. I also recommend creating a timeline that does everything that you need and then attaching one ScrollTrigger to that timeline. That should make achieving your goal pretty straightforward.

  • Like 3
Link to comment
Share on other sites

Hi Zach,


many thanks for the quick response. I immediately tried to follow your advice and the first thing I did was clean the code. Then I tried to create the timeline.

Unfortunately, I am unable to create the forEach loop in such a way that the comments fade in one after the other. Currently, all of them fade in at the same time. I have adjusted my project in Codepen again so that you can better see what I mean.

 

As soon as I adjust trigger to "comment", the markers appear in the wrong place.


Greats Chris

 

 

gsap.registerPlugin(ScrollTrigger);
	
const fadein = gsap.utils.toArray('.comment')
fadein.forEach(comment => {

const tl = gsap.timeline({
	scrollTrigger: {
  		trigger: "#scroll-container",
  		start: "top top",
  		end: "+=2000", 
  		scrub: true,
		pin: true,
  		anticipatePin: 1,
  		markers:true
	}
});	
	
tl.to(".section-1", 1, {autoAlpha: 0, scale: 2,}) 
	.to(".section-2", 1, {scale: 1.7,}) 
	.to(".section-3", 1, {autoAlpha: 1,})
	.to(comment, 1, {autoAlpha: 1,});
});

 

Link to comment
Share on other sites

Hey Chris, welcome to the forums.

 

As of now you are creating the whole thing forEach of your comments - the whole timeline attached to a ScrollTrigger multiple times.

 

You don't actually need a loop if you want to fade in the comments one by one at the end, you could use a stagger instead.

 

Try this - one single timeline with a ScrollTrigger attached to it (as Zach suggested) and a staggered tween for your comments at the end of it:

 

gsap.registerPlugin(ScrollTrigger);
	
const tl = gsap.timeline({
	scrollTrigger: {
  		trigger: "#scroll-container",
  		start: "top top",
  		end: "+=2000", 
  		scrub: true,
		  pin: true,
  		anticipatePin: 1,
  		markers:true
	}
});	
	
tl
  .to(".section-1", 1, {autoAlpha: 0, scale: 2,}) 
  .to(".section-2", 1, {autoAlpha: 0, scale: 2,}) 
  .to(".section-3", 1, {autoAlpha: 1,})
  .to('.comment', 1, {autoAlpha: 1, stagger: 1});

 

 

See the Pen d28d88726375a29e16216fe1b8118d32 by akapowl (@akapowl) on CodePen

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Hey akapol,

 

many thanks. You helped me a lot with that. 

 

Last question:

Is it possible to define "stagger"? For example, comment 1 is hidden, but comment 7 is shown. The idea is that 6 comments are active and these are then replaced when scrolling.

 

Best regards, Chris

Link to comment
Share on other sites

 

Using stagger as an object, you gain access to some more advanced options

 

gsap.to(".box", {
  y: 100,
  stagger: { // wrap advanced options in an object
    each: 0.1,
    from: "center",
    grid: "auto",
    ease: "power2.inOut",
    repeat: -1 // Repeats immediately, not waiting for the other staggered animations to finish
  }
});

 

See the docs for more info on that

https://greensock.com/docs/v3/Staggers

 

 

How to exactly do what you want really depends on how many and how/when exactly you want your comments to fade out and others to fade in.

 

If it would be a scenario as simple as this, you might not even need to use the stagger-object.

 

See the Pen 8efc151a524c7946c1f5d57fcce01892 by akapowl (@akapowl) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

Hey akapol,

Thank you very much, you have helped me a lot.

I can't say thank you enough.

 

I was able to adapt the code so that it now runs perfectly.

 

gsap.registerPlugin(ScrollTrigger);
  
var $lis = $('.commentlist .comment');
if ($lis.length > 6) {
$lis.slice(-6).addClass("stay");
}
	
$number = '<?php echo get_comments_number();?>';
const thisManyToFadeOut = $number - 6
const gapBetween = 1
	
const tl = gsap.timeline({
	scrollTrigger: {
    	trigger: "#scroll-container",
        start: "top top",
        end: "bottom -=4000", 
        scrub: true,
        pin: true,
        anticipatePin: 1,
        //markers:true
        }
    });	
				
tl
.to('.comment', 1, {autoAlpha: 1, scale: 1, stagger: 1})
.to('.comment:not(.stay)', 1, {autoAlpha: 0, stagger: 1}, "-=" + (thisManyToFadeOut + gapBetween));
									

 

Best regards, Chris

  • Like 3
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.
×
×
  • Create New...