momo12 Posted October 20, 2022 Share Posted October 20, 2022 Hi, I have this code but why the clip path is not working? I want to animate the text and it works but looking for a solution to add each line inside a mask. See the Pen xxjoNjY by emdesigner-or (@emdesigner-or) on CodePen Link to comment Share on other sites More sharing options...
momo12 Posted October 20, 2022 Author Share Posted October 20, 2022 I even tried this method but didn't work Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 21, 2022 Solution Share Posted October 21, 2022 Hi, I don't see anything related with clip-path in the codepen example you posted. Here are some threads where animating the clip-path property is explored and explained: Also in your codepen you are doing this: const text = new SplitType(".text", { types: "lines", lineClass: "lineChild"}); const mask = new SplitType(".text", { types: "lines", lineClass: "lineParent"}); Then you create a GSAP instance where you target the ".lineChild" selector, but there are no elements in the DOM with that class, since everything was replaced with the ".lineParent" class, so all the elements have that class. This seems to work, I don't know if it works in the way you intend: const text = new SplitType(".text", { types: "lines", lineClass: "lineParent"}); const mask = new SplitType(".lineParent", { types: "lines", lineClass: "lineChild"}); gsap.set(".lineChild", { y: "200%" }); let a = gsap.to(".lineChild", { y: "0%", duration: 0.5, stagger: 0.1, delay: 0.5, paused: true }); Finally the split text plugin you are using is a third party plugin and unfortunately we don't have the time resources to debug other tools, we have to focus our efforts in GSAP related questions. Let us know if you have other questions. Happy Tweening! Link to comment Share on other sites More sharing options...
momo12 Posted October 21, 2022 Author Share Posted October 21, 2022 52 minutes ago, Rodrigo said: Hi, I don't see anything related with clip-path in the codepen example you posted. Here are some threads where animating the clip-path property is explored and explained: Also in your codepen you are doing this: const text = new SplitType(".text", { types: "lines", lineClass: "lineChild"}); const mask = new SplitType(".text", { types: "lines", lineClass: "lineParent"}); Then you create a GSAP instance where you target the ".lineChild" selector, but there are no elements in the DOM with that class, since everything was replaced with the ".lineParent" class, so all the elements have that class. This seems to work, I don't know if it works in the way you intend: const text = new SplitType(".text", { types: "lines", lineClass: "lineParent"}); const mask = new SplitType(".lineParent", { types: "lines", lineClass: "lineChild"}); gsap.set(".lineChild", { y: "200%" }); let a = gsap.to(".lineChild", { y: "0%", duration: 0.5, stagger: 0.1, delay: 0.5, paused: true }); Finally the split text plugin you are using is a third party plugin and unfortunately we don't have the time resources to debug other tools, we have to focus our efforts in GSAP related questions. Let us know if you have other questions. Happy Tweening! Thank you @Rodrigo I used the wrap method to solve this. Yes, I didn't know SplitType doesn't belong to GSAP. I thought SplitType and Text are the same. With the SplitText I don't need to use the wrap method. The method I found works perfectly. But with SplitType I have to use the wrap method. thanks anyway! 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