BearAxe

D'oh! So this is actually a snippet from a larger site. I didn't think it was wrong because i copied the file exactly, but it turns out there are some outer styles and structure that are likely missing. I'm going crosseyed from this project, my bad. Looks like that is the fix for this demo. Thank you so much! I'll have to be more careful about how I copy these things over to code pen from now on, but the cdn includes definitely just work out of the box on codepen when you register them lol Thanks again!

I'm trying to set up a codepen so I can make a different forum post. Basically, what's happening right now is that the ScrollTrigger plugin isn't getting registered. Seems fairly simple, but I can't google for anything because of SEO linking back to every instance of codepen being mentioned in the forums. Can someone help me figure out how to do this? I'm not sure if i need to run an import off the url or something crazy like that but I'm kind of at a loss for what to even try because codepen hides the cdns in the settings menu. I did try referencing them as window keys, but that did not work. Expected behavior: the background behind each section should change when the user scrolls down the page.

Works like a charm! Thank you so much! If anyone else comes across this and wonders why my solution doesn't allow for the animation to replay on scrolling back up, like I initially did, you'll need to uncomment the scrub line to enable that behavior.

Context: I'm trying to create a site with pinned panels that trigger animations inside these panels when you scroll down. Seems simple enough. Problem: When I repurpose code out of the docs to try and get the green box to move, something about the way i'm doing it isn't allowing the green box to rotate in towards the center of the viewport when I scroll down. Attempts: I've tried changing around what selectors are used, but I left it in the state that i'm pretty sure is supposed to be correct. I think I may be having a fundamental misunderstanding of what something means, but I'm so new to this that I can't seem to figure out what that may be. I did try looking through the gsap demos of scroll trigger to see what I could find, but they all seem to be more complex than what I'm trying to do. Any help would be greatly appreciated.

Well, it turns out i didn't read the docs closely enough! This was caused by me using window as the bounds. If i replace bounds: window with the container's class name, this works exactly how I was hoping it would. Love when I find the answer right after asking for help ? Hope someone else finds this useful!

Problem: I have a game i'm trying to create where you basically have a bank of boxes that you drag up to match with a hitbox. initially, these draggable elements are at the bottom of a layout that may be longer than the height of the viewport. However, I noticed while trying to place the boxes that the boxes will initialize to the bottom of the screen instead of to where i'm setting the y coordinate. Want: I would like to know if there's a way to force the transform down below the bottom of the viewport so that when i scroll down, i see the bank of draggable elements positioned to where i set the coordinates using the level coordinate map. is this possible? I've added a minimal demo of the issue in the attached code pen. see how box4 is set to y coord 10276 and how it is flush at the bottom with boxes 2 and 3 with y coords 1176 and 1110. I would expect box4 to initialize below bottom of the viewport in this case. can i trick it into doing this somehow?