Chris Prieto

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