Share Posted March 18, 2021 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 More sharing options...
Share Posted March 18, 2021 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted March 19, 2021 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 More sharing options...
Share Posted March 19, 2021 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 3 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 19, 2021 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 More sharing options...
Share Posted March 19, 2021 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 5 Link to comment Share on other sites More sharing options...
Author Share Posted March 25, 2021 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 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now