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.

oh snaps! does anyone know if those hats are embroidered?

@ZachSaucier I would tend to agree with you. This approach to the side scrolling effect has always seemed kinda hacky to me but I don't know how else to do it (fart sound) That said thanks again for your help here Zach. In my learning of javascript I seem to not be thinking globally or big enough. I have this notion that everything has to be super specific to itself but looking at this code it's so straightforward. With your code I was able to get this working in a pretty cool manner: https://codepen.io/ionz149/pen/RwbJmWp

Thanks ya'll! @ZachSaucier Mostly because I am at best utilizing the Mr. Magoo approach and am blindly wandering thru all the things with accidental results haha I am on the verge of a cold or something so I am not firing on all cylinders right now so I want to clarify a few things. 1. I tried that and it is not that great but I may have done it wrong: https://codepen.io/ionz149/pen/PoYaxgw I don't see the padding when I scroll up ex anticipated but once I pass the animation and the reverse:false kicks in I end up with the same padding spacing when scrolling down. Kinda of close but I'm not getting how to only allow that padding to show when the animation is active and hasn't been completed. 2. I think this is more what I am after however it is more to wrap the noodle around. I would add the onComplete to the timeline in question. But then how do I use that to control the scene's reverse:false or the padding? @mikel The answer might be there but I fear I am too dense to spot it. Are you suggesting I look into destroying the scene?

This might be more scollmagic based but banking on the good graces of someone smarter than me and maybe it will prove useful to someone in the future. So I was trying to to do this thing where when scrolling down the site moves horizontally when you enter a specific section. But it became cumbersome to scroll back up and have to view the animation in reverse. I set that animation to reverse:false which deff stops the animation when scrolling back up but it is left with a giant inline padding-top. I assume this padding is required to allow space to scroll for the horizontal animation. all and any insights much appreciated

the scrollmagic scene reverse:false seems to be the cause of the issue. Bleh, I know this aint the scrollmagic support group but if anybody has any ideas I'd love to hear em. Gonna try and remove the reverse:false and the duration times to see if I can make do.

@ZachSaucier no I deff. meant to post here, was just lazy and reused that pen. This question is all about media query watcher and the code from this thread is in question. But yes I am having an issue it seems for some reason on my local I cannot get the clear props to work after browser resize. In this thread I was having the same issue and it was fixed by re-working the code, clearing the timelines and setting a clearProps for every object used in the tweens. Kind of at a loss and testing more to see if maybe it is the use of vars in the set tween that clears everything is the issue(?) Will report back if anything

ack so immediately after pressing submit I realized I had a type-o in my clearProps tween. However still curious id I should I be able two have different sets of tweens per timeline per breakpoint?

So after messing around with this for a bit I realized that the timelines need to have the same amount/types of tweens. Is that correct? Or am I just implementing it incorrectly? https://codepen.io/ionz149/pen/RwbpXpa if you comment out line #14 (.to('#pre ... it should start working as expected I just wanna make sure that I *cannot* have two totally different sets of tweens per timeline per breakpoint

@ZachSaucier right on thanks so much dood! I believe I saw your comments on some git repo I was looking thru the other day and was like damn this dood gets around haha

@ZachSaucier I think you nailed it. And all that seems to make a great deal of sense to me. If I were to add another animation to the area commented as: // or another animation or something would that just be another timeline.play()? ie: somethingTl.play()? Just wanna make sure Im getting this