Unbekannter

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

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

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

Hello dear developers, I can't get any further with a timeline with a loop. Which is why I would like to hire someone to finish the code. The Problem: https://codepen.io/unbekannter/pen/dyOBOXd 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. Your mission Adjust the forEach loop and timeline to make it work. It is important that the comments in Section 3 have a vacant position. Write me a PM if you are interested. Greats Chris

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