mr.G Posted July 14 Share Posted July 14 Hello! Could you say how can I create the same effect, please? Link to animation: https://drive.google.com/drive/folders/16hVBmQ8v3XZsKS7WRghidVecbXzO6x1h?usp=share_link Best regards, Mr. G Link to comment Share on other sites More sharing options...
GSAP Helper Posted July 14 Share Posted July 14 We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. Link to comment Share on other sites More sharing options...
mr.G Posted July 14 Author Share Posted July 14 Okay, I understand you. Sorry for the inconvenience Unfortunately, I just do not understand how to make this effect. I just don't understand how this text fills. This needs to be played with opacity or add a second paragraph of text. In short, I don't understand. That's why I wrote to you here, there was no other solution Link to comment Share on other sites More sharing options...
mr.G Posted July 14 Author Share Posted July 14 More precisely, I understand how to do it with all the text at the same time. It's simple. But how to do it smoothly and gradually is not clear to me 🤔 Link to comment Share on other sites More sharing options...
alig01 Posted July 14 Share Posted July 14 Hey, basically you could achieve this effect with stagger, See the Pen eYQVaQL?editors=1010 by alig01 (@alig01) on CodePen distributeByPosition is a helper function, the details and the explanation could be found here: See the Pen gyWrPO by GreenSock (@GreenSock) on CodePen Hope this helps 4 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted July 14 Solution Share Posted July 14 Hi, Create two texts that are in the same position (absolute in a parent that has position relative) and then just use SplitText to create the lines and animate them in sync. Something like this example but with lines: See the Pen mdKWBmm by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted July 14 Share Posted July 14 Well.... what @alig01 already said 2 Link to comment Share on other sites More sharing options...
mr.G Posted July 17 Author Share Posted July 17 Thank you all for your help 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