SWALKER Posted August 30, 2022 Share Posted August 30, 2022 I have some headlines that appear the disappear, moving through each one I was using this... var tl = gsap.timeline({repeat: Infinity, repeatDelay: .1}); tl.to("#rotation-1", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-1", {delay: .5, opacity:0, display:"none"}) tl.to("#rotation-2", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-2", {delay: .5, opacity:0, display:"none"}) tl.to("#rotation-3", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-3", {delay: .5, opacity:0, display:"none"}) tl.to("#rotation-4", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-4", {delay: .5, opacity:0, display:"none"}) tl.to("#rotation-5", {delay: .5, opacity:"100%", display:"inline"}) tl.to("#rotation-5", {delay: .5, opacity:0, display:"none"}) Which was working perfectly but now the client wants 13 headlines I feel stupid because I KNOW that this can be simplifies by targeting all objects with the same class but I can't seem to find the right documentation - can anyone point me in the right direction? I am only just learning GSAP I have managed to do this for items with the same class on a page, but not in a timeline Link to comment Share on other sites More sharing options...
SWALKER Posted August 30, 2022 Author Share Posted August 30, 2022 Okay so literally 2mins after I posted this worked - correct me if this is wrong but this seems to do the trick! var tl = gsap.timeline({repeat: Infinity, repeatDelay: .1}); const rotations = gsap.utils.toArray('.text-rotation'); rotations.forEach(rotation => { tl.to(rotation, { delay: .5, opacity:"100%", display:"inline" }) tl.to(rotation, { delay: .5, opacity:0, display:"none" }) }); 2 Link to comment Share on other sites More sharing options...
Cassie Posted August 30, 2022 Share Posted August 30, 2022 That's the way! Great job 🥳 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 30, 2022 Share Posted August 30, 2022 Ooh, a little adjustment - there's no such thing as Infinity - that should be -1 (unless that's a var in which case ignore me) 2 Link to comment Share on other sites More sharing options...
SWALKER Posted August 30, 2022 Author Share Posted August 30, 2022 Thank you! 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