Maksiss Posted February 4, 2021 Share Posted February 4, 2021 Hi! I've been trying to make this work for a while, but all the relevant tutorials use some sort of a masking technique. And as you can see in the codepen, it's not appropriate here, because of the timeline gaps it creates. I can't put the timeline above the mask, because in the end I need it behind the label. Maybe I could juggle the z-indexes at the midpoint, but that seems like more trouble than it's worth. In the end this is what I'm trying to reveal. So just using from(x:200 /or/ width:0) wouldn't work here, since I want to get that painted on brush stroke effect. Any tips on how could I achieve this? Thank you! See the Pen gOLaNea by maksiss3 (@maksiss3) on CodePen Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted February 4, 2021 Solution Share Posted February 4, 2021 Hey Maksiss and welcome to the GreenSock forums. A clip-path or mask is definitely the way to go (really the only way to go unless your background color is a solid color in which case you could fake a clip-path or mask). You just need to make sure to apply the clip-path/mask to only the content that you want to be revealed, not the timeline line. 1 1 Link to comment Share on other sites More sharing options...
Maksiss Posted February 4, 2021 Author Share Posted February 4, 2021 Thank you! Was not aware of how to properly use such a feature. Another thing, if I may. I want to apply scrollTrigger to each element trough forEach loop. Is it possible to somehow access each elements pseudo? (Since I want to trigger it's animation first) function largeFactTimeline(fact){ let square = fact.CSSRulePlugin.getRule("::after"); } Tried this, but it doesn't seem like that works. Any work around or will I have to try and transfer the pseudo element into the HTML? Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 4, 2021 Share Posted February 4, 2021 1 minute ago, Maksiss said: Is it possible to somehow access each elements pseudo? Technically yes if you use the CSSRulePlugin. However, as stated in its docs, usually we recommend either using a "real" element (i.e. not pseudo-element) or animating a CSS variable instead. 2 Link to comment Share on other sites More sharing options...
mikel Posted February 4, 2021 Share Posted February 4, 2021 Hey @Maksiss, Explored an option just for fun See the Pen jOVbgVx by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 1 Link to comment Share on other sites More sharing options...
Maksiss Posted February 4, 2021 Author Share Posted February 4, 2021 Tried doing something similar but with clipPath. And for some reason it is not working as intended. Is it a bug or not intended to work like that? See the Pen poNgEWO by maksiss3 (@maksiss3) on CodePen So thank you for the exploration @mikel, it's a perfect alternative! Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 4, 2021 Share Posted February 4, 2021 It's not a bug, it's due to how browsers convey the clip-path information. In summary, they don't report the exact value you wrote, they report a shorthand which is ambiguous. So GSAP can't know the original value just from the rendered value. With that being said you could use a .fromTo() instead in this case: See the Pen wvoMoYb?editors=0010 by GreenSock (@GreenSock) on CodePen 2 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