Chris Prieto

of course haha I was suspicious it was something like that. I initially had a set of dots so it wasn't so obvious it wasn't working exactly as intended. This is interesting. It does fix the stuck at 100% thing happening on phones tho. So the way you did it, it will at the longest take four seconds (or whatever duration is) and jump up if it finishes earlier? Your second option sounds better but for the time being I at least have that "preloader" going away as it hits 100%. I currently have time to bang some code around so if you have ideas on how I could go about getting the preload timeline to utilize actual page progress I can give it a go. I can't conceive how it would work with the duration in place or how I turn the page's progress into something I can stick in the durations place but I'm gonna start digging around and see what I find.

I wasn't sure wether to start a new thread or continue via comments on this one since they are very much related. So I opted to add comments in the name of keeping things in one place and since it is building from my original pen. Once I put this out into the wild I noticed it was sticking at 100% on more image/video heavy pages. I added a progress bar and percentage counter to better illustrate the issue (maybe the issue?). From my end the js/tweens makes sense so I assume I am probably doing something wrong. I was anticipating it would get to a hundred and promptly go away, however I noticed it sticking to 100% on all major browsers I checked in. On the other end of the spectrum if it loads faster it wont always make it to a hundred but that is less important really. My main concern is people on slower connections sitting there staring at a preloader stuck on 100% (currently happening on my phone, I work in a tall building and my signal is particularly crappy up here if I am not on wifi) Any and all help greatly appreciated. https://codepen.io/ionz149/pen/ed63425493ba9f23f8dd31823ebbd85d

yes! I can finally give back to this awesome community @Ultra Design Agency using scroll magic it would be something like this: https://codepen.io/ionz149/pen/81f67d338806c2c3bd3fc683ad12a48a Also @mikel has posted a really good example in your previous text animation thread of the intersection observer, that you should be able to mess with and get going: https://codepen.io/mikeK/pen/GVpojX

Thanks @mikel & @GreenSock! This has got me going in the right direction.

In the past I've lucked out and the svg morphs I did were smooth as butter but I cant figure out why my attempt to animate a circle path into a tear-ish type of shape path results in slightly off morph. It seems to twist around by default. I tired messing with shapeIndex, morphIndex, origin, rotational type. I was shooting for the circle to stay a circle and just kinda spout the pointy part. Is there something I am missing or is it a matter of more tweaks to the shapeIndex, morphIndex, origin or type?

I be derpin'

@ZachSaucier Thanks! That does work but I was using the yPercent to shove the h2 down out of view. @Mikell Trying to get the text to stagger in from below and space apart. Thank you for letting me know about letter-spacing, I will replace with margin

https://codepen.io/ionz149/pen/BaBEgQa

I have some text flying in on a staggerTo to bring the text into view, but then when I animate the letter spacing it animates from the left instead of center. I tried to clear props but it reverts to the set I am using to push the text out of view.

haahaha damn that would've taken me a few days to randomly zero out. Thank you and no need to apologize, you have gone above and beyond. I got both pens working now. However my local page is still giving me grief. But the pens work so I know it is possible just gotta figure out what it is now.

@ZachSaucier Wow, that is crazy. I had kind of admitted defeat and then your vote of confidence got me all motivated. I made a few attempts to fix it. First I tried to make the svg height:100% in css, seemed obvious but did not change anything. Then tried to use the svg/wrap div bottom position and basic math to get a different number for the scroll y coordinate, which got pretty close but always left a small jump. I don't really feel this is correct approach. But after a few hours I can confidently say I have no idea why the event is firing off at end of svg or what I need to do to make fire off at end of wrap instead.

ugh, oh well... you would stab your eyeball with a dull pencil if you saw the real code ? I was setting the scroll position wrong because I am crashing and burning right on thru this thing haha. Adding distance variable to the y position still resulted in jumping. Perhaps it's matter of getting the distance variable to calculate the correct number (which I can totally be doing wrong) and that firing at the correct time ... or not *shrug* Additionally I recreated using ScrollMagic code instead of doing it in a timeline and ended up with the exact same results so that is promising. I've gotten both the timeline based and scrollmagic based example down to a slight stutter of a jump but it's still noticeable. This might be as good as I can get it but will keep banging my head against it. gsap timelines: https://codepen.io/ionz149/pen/RwbJmWp scrollmagic: https://codepen.io/ionz149/pen/mdbGEwj

awesome! cap has been ordered ?

Thanks for this. I think I get what you are saying and I tried but now it jumps to the process timeline. I added these two vars: var bloopEl = document.getElementById('bloop'); ~ I tried changing to footer as well var distance = bloopEl.getBoundingClientRect().top; ~ i tried bottom too and then replaced the zero with the distance var: scroll(distance, innerHeight); https://codepen.io/ionz149/pen/RwbJmWp

Spoke too soon but it's so darn close! I think I butchered your code by moving onComplete from the the last tween of the 'processTl' to the 'bloopTl' after it so that the clearing of props/class adding happens off screen. That seems to cause the page to jump a lil once you are passing the horizontal section. Your codepen does not jump but the horizontal section('processTl') gets big white gap before its out of view since the props get cleared before it is out of view. I broke down your function and I get the .destroy() of the scenes/timelines. I get the clearing of props but what I dont get is this guy: 'scroll(0, innerHeight);' It says its keeping window in place but it seems to only do that in your example haha. I commented it out and the jump was less intense but I feel like I am missing something super obvious to make that jump go away.