Chris Prieto

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

Okay, this is a bit over my head but I am hoping to get it eventually. I removed the css objects and the add/remove class stuff but am unsure how to replace with GSAP. I've been trying to wrap up a project so I haven't had much time to break stuff but will get back to it shortly

So I started out wanting a preloader which I have currently working but it uses imagesloaded.js which is great for images but cares not for videos. Given my limited knowledge of js/jquery I opted for this simple solution. It seems to work and I only have a video and some bg images to load so I am hoping this will suffice. My problem is I cannot figure out how to have a timeline for the preloader that only plays when preloader is present. And then play the intro timeline once the preloader is finished. I was able to get the intro animation to play after preloader if I stuff it after the fadeOut in the .load function(). It feels wrong and I first tried to do introTl.play(); but I couldn't get it working.

@OSUblake I just tried to replace left and top with x and y and the cursors flew off in odd directions because the transitions. Once I do get that fixed it stops animating when you hover over links. I was able to get a second ring that follows around using your example but cannot get the cursor to animate when hovering over link either. https://codepen.io/ionz149/pen/PoYWNpV

awwwww maaaaan ... well that is stupid simple fix haha 🤦‍♂️ I even feel like I might've read somewhere that was the issue now that you mention it. Thanks again @ZachSaucier !