JulieAutobots

You are amazing, this was exactly what I needed. Now to wrap my brain around how it works so I don't make the same mistake in the future ? Thank you!

Hi! I'm about 90% of the way there with this piece of code. I'm trying to scroll an element left or right based off the proximity of the mouse to either edge of the screen. The closer to the edge of the screen the mouse is, the faster the element should scroll, and when it hits either edge of the element, it should stop. I've got it working by tying the scroll to a timeline, and using tl.timeScale() to slow down or speed up the animation based on the mouse's proximity to the edge. It works great when you're 'scrolling' to the right! But reversing the timeline and scrolling to the left is causing all sorts of jankiness and bouncing around when it reaches the edge of the element. I'm sure I'm just making a simple error in how reversed timelines work, but I can't for the life of me figure out how to fix it. An extra set of eyeballs on this would be very appreciated!

You are amazing; my math wasn't strong enough to figure out what was going on. I've tested your solution on a couple different areas, and so far it's working consistently! Thank you for your help ?

Hello! I'm trying to get ScrollTrigger-powered parallax background images to cooperate, and would appreciate a nudge in the right direction. Basically what I've noticed is that if the section with the parallax background image isn't 100% of the viewport height, and/or the background images given are inconsistent sizes across different sections, I end up seeing white around the edges of the image. I'm following the parallax background demo code closely, so I modified that codepen to demonstrate the issue I'm facing. All I changed were the dimensions of the picsum background images, and the section height from 100vh to 60vh. As you scroll through, you should be able to see white peeking around the top and/or bottom of the images depending on your screen size. Is there any way to make sure this doesn't happen? I can't rely on consistent section heights or background image dimensions. Thank you!

Hi again! I've set up a ScrollTrigger section that pins and snaps each panel to the browser window, using this awesome demo for reference. https://codepen.io/GreenSock/pen/KKpLdWW The website uses ASScroll as a ScrollerProxy, and I'm having some issues getting the two effects to co-exist. The pinning works great, but snapping to each section? Not so much. I was able to mash the ScrollTrigger and ASScroll codepens together into a working example of the issue. You should be able to see the ScrollTrigger pins working perfectly, but no snapping to each panel. Any thoughts on how I can make snapping behave? As always, thank you for all your help! ? I'm getting the hang of GSAP, but some issues are beyond my understanding still.

Thanks for your quick reply Zach! Having a second set of eyes making sure I'm not shooting myself in the foot makes me feel a lot better. I've successfully made the suggested changes in my project, along with an additional velocity check, and it's working great. I've integrated with ASScroll and there's some easing going on, so the velocity check helped prevent it from firing incorrectly right at the end of the scroll (which was making the pinned header pop back into view). Glad to know I can use GSAP instead of an additional script for this functionality! All the best ?

For several projects now I've used a JS script called Headroom.js to animate a fixed header element in and out of view as the user scrolls. Now that I'm getting more of a handle on GSAP, I want to try replicating Headroom's functionality in GSAP so that I can easily connect it to other animations and scrolling libraries. All Headroom.js does, in a nutshell, is add and remove different classes to an element as the user scrolls that tell us how far down the page we've scrolled and whether we're scrolling up or down. Classes like headroom--pinned , headroom--not-top, etc. Then the actual work of hiding/showing the header is done in CSS. I've put together a Codepen of what I have so far. The website is built in WordPress, which has jQuery loaded by default, so I'm making use of that to handle changing classes. What I have... works? But I'm worried it's way too resource-intensive, since it fires every onUpdate when scrolling the entire page. Once I start adding other scroll animations in there, that's probably going to be a problem. I really only need the classes on the header to update whenever there's a change: When we reach the top of the page or bottom of the page, when the user starts scrolling up, when the user starts scrolling down. But I'm not sure how to go about making this better. If I could get the classes to only update when there's one of the changes listed above, then I could implement event listeners and triggers too. I would appreciate an extra set of eyes on this to point out where I can improve. Thank you!

Thank you Zach and Blake! You guys are amazing. I understand the problem better now, and Zach's solution works perfectly. Looking forward to working with gsap more in the future!

Hey there, GSAP noob here. I've messed around with it for a few tiny effects here and there, but haven't really incorporated it extensively in any projects... before now. Overall, really happy with GSAP's flexibility! But there's been a road bump, and I'm hoping someone could help point me in the right direction. (Note: This code was cobbled together before the 3.2 release. I went through the documentation to see if there's anything that could help solve my problem, but I'm starting to see double) I expanded on a parallax script I found here on the help forums to animate an svg graphic on mouse movement, with the main svg graphic animating position, some binary text staying locked in place, and a dashed line connecting the two. I got everything working great in chrome, and went on with developing the rest of the project. Today I was doing some browser compatibility tests, and realized the script is throwing some weird errors in Safari. TypeError: undefined is not an object (evaluating 'polyline.points[1].x') on line 138 I'm not sure why this script would be working fine in Chrome but not Safari. Could someone with more GSAP know-how take a peek? Thank you in advance!