Share Posted March 3 Hi, I've been trying to get something to work and after browsing the forums and google, reading a lot of topic and trying a lot of things. I am currently at a roadblock where I have no clue how to continue.Explanation I have a wrapper and 3 sections, what I envision is that my wrapper is pinned and my first section is always visible on load (this works). Upon scrolling down I want to fade out my first section and fade in the second section with a scrub (this also work). Now where I am stuck is, is that I want to have specific elements within the section to fadeIn and stagger and/or add a class when said section is currently active. I already tried using 'toggleClass()' but this seems to work globally and not per section that fades in. Here's a codepen of what I currently have. Any help is appreciated! See the Pen MWqmrLb by djilanos (@djilanos) on CodePen Link to comment Share on other sites More sharing options...
Share Posted March 3 Hi, There are mainly three problems in your setup. sections.forEach(function (elem, i) { gsap.set("section", { zIndex: (i, target, targets) => targets.length - i }); var smallTL = gsap.timeline(); smallTL .to(elem, { autoAlpha: 1 }) .to(elem, { autoAlpha: 0 }) // <- 1 .to(elem.querySelector/* 2 */(".fadeThis"), { opacity: 1/* 3 */, stagger: 0.5 }) .to(elem.querySelector(".fadeThis"), { opacity: 0, stagger: 0.5 }); largeTL.add(smallTL); }); You are setting the autoAlpha (opacity + visibility) of the entire section to 0, so nothing inside the section is visible after that. You are using querySelector to get the elements inside the section, but querySelector only returns the first one. You need to use querySelectorAll. Another option is to use GSAP Selector to get the elements of that particular section. You are only animating the opacity of the fadeThis elements, but before the loop you use a set() instance to make their autoAlpha 0, so you're not changing their visibility, so regardless of animating the opacity they won't be visible. Here is a fork of your codepen: See the Pen abaWGeE by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 3 Hi Rodrigo, Thanks for the explanation! I did use querySelectorAll but it didn't change anything, but I guess I just didn't read the documentation good enough about the difference between autoAlpha and Opacity. Thanks again! 😎 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