tlemaitre27

Thank you for the tip I have a dot in a single line in my codepen

Thank you, I thought It was that but I wasn't sure, but what about the glitch when I have some words in italic (with the tags <i></i>) or span? Also, I don't know why, but my outerSplitP.lines is not set to overflow: hidden until the animation is triggered

Hi! I have an animation that reveal my texts line by line with SplitTextJs. The problem I have is that I have my paragraphs that are splited line by line but my lines wraps so one line is now 2 lines It happen mostly when I refresh the page without the cache. On my codepen I need to refresh more than once without the cache to get the problem. Also, sometimes I have a problem with the split when I have some words in italic or in a span. Thank you!

It works like a charm !! Everything make sense now thank you a lot

Thx elegant for the tip Tank you a lot Zach for your help! I understand more the logic behind. But I still don't understand why you put the creation of the split inside the loop? I mean, var outerSplit = new SplitText($('.titles'), { type: 'lines' }) automatically split the lines for all the elements with the class titles no? Another problem I have is that the the xOffset is not working well. It look like the stagger made the line not to fully translate at -100% On my codepen code, often it's fine tho but sometime I get the bug too , as well as your code pen. There is also the onComplete method that is not triggered when the animation is complete

Thank you but there some things that I don't understand. Why put el.tl if in the version 3 of gsap we can not do that and simply have myElement = gsap.timeline() (like I did in my initial code - that is in comment at the bottom of the script). Plus, I did what you said, but the trigger still not working and all my text disapear when i'm scrolling (like your demo on your codepen

Thank you Zach for your input and the resources I changed my code based on a comment and a codepen you made in this tread. I have update my codepen if you want to see my changes. But now I got a problem, my animation is working but is not trigger by the IntersectionObserver. When I open the console, I see this error : Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. On line 44. I don't understand because the targets i want to observe are the children of my list from document.querySelectorAll() Thank you

Hi! I'm using the plugin SplitTextJs to create an animation reveal to my titles (you can how I'm doing it in the Codepen). I'm doing this animation on many elements and I want to trigger the animation when the element is in the viewport. With some research I saw that I need to do some loop and a lot of people are doing that with scrollmagic. I was wondering if it's possible to do it without scroll magic. The reason is that I have already many script loaded and I want to have the less script possible to load especially if I'm using it for little things. Thank you