Jump to content
Search Community

Add Mask to each line of a paragraph with GSAP

momo12 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

  • Solution

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...