Sam Tremblay

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

Woow Thanks for your fast come back! Yes I updated to 3.11.1, but it's not resolve the problem. For the extra space, i'm not sure to understand. Do I need to add some padding-bottom to body? But in fact, I'll have a space that I don't have in the graphic model right? Here is my Codepen: <iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/sam-tremblay/embed/preview/QWrEqRX?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/sam-tremblay/pen/QWrEqRX"> Untitled</a> by Sam T (<a href="https://codepen.io/sam-tremblay">@sam-tremblay</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> (Sorry, I just copy Source Code from Chrome instead of my PHP Code, it's not clean) A really big thank you for your help! Sam

Hi GSAP Helper! Thanks for your help, but in fact, I don't understand how do you want I push to you an example if it's for the global Website? My example is in the video, wee see the problem... Could you just help me by said to me if Gsap do that normaly or if it's me the problem please? And if it's Gsap, can I disabled it? Thank you! Sam

Hi Martin! You have multiples ways to do that. First, you can simply add an "onComplete" function to trigger when your SVG is completely draw. .from(".path-1", {drawSVG: 0, onComplete: () => { console.log('Completed'); }}, 0) In an other hand, you can done your scrolltrigger inner a timeline and call your border-color change after like you do now, but like that: main.from(".path-1", {drawSVG: 0}, 0) main.to(".path-1", {stroke: '#ff0000'}); (For the example I change the stroke color of your SVG, but feel free to change it for do your stuff with the .box) Or, in your actual scrolltrigger code, you can use onLeave, onEnterBack function. Best regards! Sam

Hello GSAP Users ? I have a question for you, if you put a look on example just under, you'll see the Body Height changing when I hover an element that the height change. Can I stop that? Because it is breaking my scroll. Or, do I need change my mind on how it work when I use the Smooth Scroller and I have some hovers that the height changing? Example: https://www.awesomescreenshot.com/video/11013387?key=0ca72e7d6fb84dcab6cb8ea4f9f376ae I use GSAP 3.11.0. A really big thank you in advance for your help! Sam