agsymonds Posted May 9, 2023 Share Posted May 9, 2023 Hi, I have repeating section using the same classes, but with different content (backgrounds and copy). I want the background to appear on scroll, and then for the text to also appear, maybe +1 seconds after the background appears. I have managed to use "gsap.utils.toArray('.section');" for the sections which are triggered on scroll and they work well. If I want do the same for text within each section, do I need to repeat the array process adding a different trigger to target the text class to trigger for each instance or is there a simpler way? TIA See the Pen BaqrVgg by agsymonds (@agsymonds) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted May 9, 2023 Share Posted May 9, 2023 You're part way there. Good job. You'll want to create a timeline for each section and animate the .text class from opacity:0 after the box fades into view. Something like this should work. See the Pen 56deefd4eca5c79818393d4635661fdb by PointC (@PointC) on CodePen Happy tweening and thanks for being a Club member.. 2 Link to comment Share on other sites More sharing options...
agsymonds Posted May 9, 2023 Author Share Posted May 9, 2023 Thanks, this looks like what I need! Greatly appreciate the support. 2 Link to comment Share on other sites More sharing options...
agsymonds Posted May 10, 2023 Author Share Posted May 10, 2023 Hi, if I add more than one <p> element to each section, only the first <p> element is affected by the .from and not both <p>, although both have the same class. I could wrap all <p> elements in a div and target that div, but I assume that there is a simpler way to target each individual <p> element? Link to comment Share on other sites More sharing options...
Cassie Posted May 10, 2023 Share Posted May 10, 2023 Hi there, You're using querySelector() here which selects the first element. You can use querySelectorAll() if you want to select all of them. Hope this helps! Link to comment Share on other sites More sharing options...
agsymonds Posted May 10, 2023 Author Share Posted May 10, 2023 Thank you! 1 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