celli

okay, I've updated my codePen, I have this working to play my timeline when I scroll up and down, this is awesome -- But I am still not seeing how I can get the state when I reach the top (I would be animating some other things when this happens). I added a temporary console.log to if (position === 0) but it doesn't seem to register. I think if I can get that, then I would need to figure out how to play to a label and pause, then if I hit the top I can resume my timeline.

okay, I will create my timeline and try and get this. One thing though, on my original CodePen I actually have 3 stages, one where I scroll down, one where I scroll up (which is an in-between phase) and another when I actually reach the top. How can I accomplish that with only play() and reverse() of my timeline ?

I am able to use scrollTrigger like you suggested using .scroll() value, which is great! But I am having trouble even starting to understand where I can use this to see if I am scrolling up or down. It works now in a basic form (I updated my pen) , but its not seeing my var: lastScrollTop -- can you show me what you mean or how to implement that into my variable lastScrollTop ?

Okay, I will create the timelines and play and reverse them for sure. I really would like to do this with scrollTrigger, but I can't see how to tell if I am scrolling Down or Up (scrollDirection) or if I have reached the top with scrollTrigger. How can I achieve this ?

Hi, I have included a CodePen to illustrate my issue. When I am scrolling downward, I have some GSAP code that transforms my elements. Wen I am scrolling upward, the GSAP code transforms them in a different way, and when we reach the top of the window the code transforms the elements in another way. The issue that I am experiencing is that, if I am scrolling fast, or if I touch the bottom and then start to scroll up and down, it *sometimes* causes the elements to jitter. When I inspect the code, it looks like my inline styles that are created by the tweens are fluctuating up and down rapidly, causing the elements to jitter repeatedly. I can usually *but not always* stop it from happening, when I re-scroll in either direction. But it is unpredictable. I am using 'overwrite: true' in most instances to try and compensate for this, in-case it is still reading the values from a previous tween, but it still occurs. Is there something that I can do to completely avoid these values from fluctuating rapidly up and down, and causing my elements to jitter ? Note: I tried using scrollTrigger to do the whole thing and recognize when I am scrolling up or down, but I was unable to figure out a way to handle that.

Thank You PointC! I added maskUnits="userSpaceOnUse" and it works now. Do I need that for every mask created? I read your article on motionTricks as well (very nice, thank you!!), In your article it says to wrap my masks in <defs></defs> tags, should I do this with all SVG masks ?

Hi, I understand from the SVG Gotchas post about animating dashed-stroked with the DrawSVG plugin, and from studying PointC's demo here https://codepen.io/PointC/pen/zrQLvO . I setup my path with a duplicate path that I can use as a mask to animate my dashed path, which seems straightforward and simple, but I still can't seem to get it to work and mask-in my dashed line. Does anyone know what I am doing wrong in my reduced codePen?

perfect explanation, thanks!

right, of course! not sure why I thought we could only go to 100%. That is great! It still seems to work with immediateRender:false; I updated my codePen to reflect this, and still seems to work ...

yep, that works! Can I get the scrollTrigger to start below the bottom of the viewport? How can I set that up? Actually I was trying to do that (in some cases) because some elements that reside close to the top of the page (like this one) - I was hoping to limit the amount of scrolling before getting to the first element that animates with scroll. This was the reason I wanted to disable it on smaller monitors, since the element would appear too low in the viewport.

When using matchMedia with scrollTrigger, it works well when I start my page at < 800px and then when resizing my browser window to > 800px (just as an example). But it seems that when I resize back to less than 800px, the position of my element does not return to it's original y value (it remains far down the page). I am guessing I need to add something else to completely kill the scrollTrigger values and reset my element to it's original css positioning. What is the best way to accomplish this ? My CodePen example should illustrate what I mean.

okay, that makes sense. I'll try and figure out where to revert on resize.

Can I do both? Can I revert the text so that it is not split into individual letters on scrollEnd, while also keeping it ready to split again in reverse when I scroll back up? The problem that I seem to keep having is when the letters are split into individual letters in the DOM, the tendency is that words break onto separate lines, in the middle of a word, leaving lone letters or parts of words on individual lines, depending on the viewport size.

It shouldn't be private, here is another link: https://codepen.io/celli/pen/mdVMOjr ahh, I must have added it within my scrollTrigger previously, I added it to the TL now (at the bottom of the JS) and it does look to be working But it doesn't animate back in reverse now when scroll back up...

I think I understand, but does that convert the HTML characters back to the original format ? I checked the previous pen and it didn't look like that was happening when I inspect the HTML, and when I tried it here I couldn't get it to work.. This pen doesn't use the child and parent splitTexts, only one, without the masking technique. On a standard splitText, I use revert like this... var tlSplitGreat = gsap.timeline({onComplete: () => {SplitGreat.revert()}}), ... and it changes the characters in my HTML back to one piece after the splitText is finished, but while using scrollTrigger I can't seem to get it working. This new pen is not using the masked letters like the previous one, it is more basic, so I thought I'd be able to just get the splitText to revert() onComplete ... is that possible ?

Hi Zach, I am still having a little trouble understanding how to use the eventListener "refresh" with the splitText revert() to format my text characters so the text is not all split in my HTML after the splitText and scrollTrigger end. I have a new codePen that I've been working on with a basic splitText tied to scrollTrigger, and my revert instance is all the way at the bottom ScrollTrigger.addEventListener("refresh", function() { SplitBurrowing.revert(); }); new CodePen https://codepen.io/celli/full/mdVMOjr I tried wrapping my code in a function and calling it the way you did, but that doesn't seem to revert the text

Thanks Zach, I will study this and see how it's done, thanks it is great.

Hi Zach, Yes, after the split, is when I mean the words break. If I want to keep it responsive and retain the transition, like you mention, I can add the re-splt to the scrollTrigger's refresh, but where exactly do I add the scrollTrigger's refresh ? I tried with the refresh method, but I probably am not including it in the right place in the code in my codePen ScrollTrigger.addEventListener("refresh", function() { splitTextTl.revert(); childSplit.revert(); });

Hi Zach, One more quick question: 1. I updated my codePen -- and because I am using scrollTrigger, I couldn't seem to get the animation to reverse and replay when I scrolled back up and then down again. So I removed this part, which now makes it work as expected : // Remove the extra markup when it's done onComplete: () => { splitTextTl.revert(); childSplit.revert(); } Is there any harm in removing that ? I assume it's okay to leave the text split, and not revert back to the original HTML. The other thing I am wondering is with split text, if I reduce the width of the browser I get words that break in the middle of a word, Is there a way to avoid that ?

Ahh, great! I thought there would be a streamlined GSAP way. Thank you Zach!

Hi, Is there a best way to achieve overflow:hidden on each character while using split text ? I have the characters in my codePen animating their y-position and would like them each to appear hidden (masked) before they animate into position. I can add overflow:hidden to my css, but that would only effect the bottom line of my text. I'd like to effect each line of text, since some of the text will wrap onto multiple lines.

Great, thanks Zach! Just was wondering if something maybe has changed since.

Hi, I animated an inline SVG with GSAP and it works really well—but now I am thinking that maybe I'd like to reference the SVG and not have the SVG inline because my HTML document get's pretty long. Is there a best approach with GSAP 3 to reference the IDs and classes within the SVG file, or best practices to use in general that would work cross browser ? I have a lot of IDs to reference, so I'm just wondering if there is a best approach to keep my GSAP code intact

Thanks Zach ! and apologies for the basic question, I should have figured that part out.

I am trying to use the helper function to pull a random element from an array that's not the PREVIOUS one that was pulled. I can't seem to figure out how to implement it into my gsap timeline. I tried referencing the function 'getRandomFrom' and then inserting my array just like using the random function, but I can't seem to get it work. Any help is appreciated.