Scrolltrigger Timeline forEach wrong timing

[Unbekannter 3 Likes (Newbie)]

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

[ZachSaucier 7,088 Likes (Superhero)]

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.

[Unbekannter 3 Likes (Newbie)]

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

 

[akapowl 4,745 Likes (Superhero)]

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

 

[Unbekannter 3 Likes (Newbie)]

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

[akapowl 4,745 Likes (Superhero)]

 

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

 

 

[Unbekannter 3 Likes (Newbie)]

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