momo12 Posted September 11, 2022 Share Posted September 11, 2022 Hello guys, I have a question. Let's say we have a pragraph. How can I reveal each line using Stagger (I want to add delay to the bottom lines) and SplitText? The thing is I want the div block which contains each line, masks the initial state. So, the lines wouldn't be visible by default. Link to comment Share on other sites More sharing options...
Carl Posted September 11, 2022 Share Posted September 11, 2022 This sounds a bit like one of my lessons. Perhaps this demo will help See the Pen KKmVgpB?editors=1010 by snorkltv (@snorkltv) on CodePen It's got a bit extra going on to make the text "unsplit" on resize and also re-init devtools. I'm doing a character-by-character animation on each line which is why I have to loop through each line. If you need to learn more about how this is set up give the courses in my signature below a look 3 Link to comment Share on other sites More sharing options...
momo12 Posted September 11, 2022 Author Share Posted September 11, 2022 19 minutes ago, Carl said: This sounds a bit like one of my lessons. Perhaps this demo will help It's got a bit extra going on to make the text "unsplit" on resize and also re-init devtools. I'm doing a character-by-character animation on each line which is why I have to loop through each line. If you need to learn more about how this is set up give the courses in my signature below a look Thank a lot for your explaination! Link to comment Share on other sites More sharing options...
Sam Tremblay Posted September 11, 2022 Share Posted September 11, 2022 (edited) Hi momo! Here is an example if you want animate your lines when they are on screen... I have not tested, but I think it's good! let gsplit; $(window).on('load', function(){ /* * Register GSAP Plugins */ gsap.registerPlugin(ScrollTrigger, SplitText); /* * Init SplitText Gsap Plugin */ gsplit = new SplitText('.splitText', { type: 'chars,words,lines', charsClass: 'char', linesClass: 'line', wordsClass: 'word' }); // Prevent Bug, add opacity 0 to your CSS and turn it to opacity 1 when ready. $('.splitText').css({opacity: 1}); /* * With ScrollTrigger, on Scroll, reveal each line of a pragraph when is coming in viewport */ const paragraphs_lines = gsap.utils.toArray('.to-reveal .line'); // Add translateY -10 and opacity 0 for the test to your CSS on elements ".to-reveal .line" paragraphs_lines.forEach((line, i, v) => { gsap.to(line, { y: 0, opacity: 1, stagger: .03, scrollTrigger: { trigger: line, start: 'top ' + (window.innerHeight - 100), // Bottom position - 100px end: 'bottom ' + (window.innerHeight - 100), // Bottom position - 100px scrub: true, markers: true } }); }); }); You can turn scrub parameter to false or just not add it if you when a reveal based on the viewport only and not on scroll + viewport. EDIT: Maybe you don't want anim your paragraph based on scroll/viewport position, but directly, with delay or not... Just remove scrollTrigger and add a delay or not.... I push a repair in my code too. Change splitText variable to gsplit. Best Regards! Sam Edited September 12, 2022 by Sam Tremblay Add example description 2 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