dkolb5

That did the trick! Thanks Jack!

When you hover over the photos a svg morphs. Displaying a white shape over the bottom of the image. If you hover while scrolling there's a 1px gap below the svg and the bottom of the photo. I've tried adjusting CSS and some other JS tests with placement of the morphed svg. But can't seem to make the 1px gap disappear on scroll. Any advice would be greatly appreciated. Thank you!

I had a theory to append a second script to the each new ajax loaded page. But have realized that's a bad idea. I'll just make it work off the one JS file. Thanks for listening.

The Javascript in my original posting is what's in the file. Just minified by webpack. I understand you only focus on GSAP related items. So shouldn't the ScrollTrigger.refresh() re-calculate the scroll triggers pin? So the pin would behave normally? For reference this is the same script just all in one codepen (and not from a separate script): https://codepen.io/bws_dan/pen/KKQLXmQ

In my codepen I have a script tag that runs a scroll trigger pin. I've tested the pin and know it works. But when it's added via the script tag (in the HTML) the start and end marker move on scroll smoother scroll. Is this multi script approach possible? Or should I just keep all scroll trigger/scroll smoother JS in one file? Here's the scroll trigger script for reference: import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) function imagesMove() { let galleryImages = gsap.utils.toArray('.gallery picture') let wrapper = document.querySelector('.gallery .wrapper') let startWidth = wrapper.getBoundingClientRect().width - window.innerWidth gsap.to(galleryImages, { x: () => -startWidth, ease: "none", scrollTrigger: { trigger: ".gallery", pin: ".gallery", scrub: 0.5, anticipatePin: 1, start: "top: +=15%", end: "+=" + (window.innerHeight * galleryImages.length - 1), markers: true, } }); ScrollTrigger.refresh() } imagesMove()

No worries Jack. I figured I'd try. And I have heard of Apple developers not being super responsive unfortunately. I know between me and one of my coworkers he didn't see the jitteryness. I am on an Intel Mac and I can't recall if he has an M1 or not. But certainly odd it would change per similar setup. Maybe it has something to do with how they handle the processing of their browser on either CPU.

Thank you for the suggestion Jack. It did help smooth Safari out a bit. Any estimate on when the safari issue might be resolved?

Hey, All. First off smooth scroller is amazing! An awesome addition to the gsap plugins. Second while testing it out I ran into some performance issues on Mac Safari. It appears jittery and shakey on scroll. Is this due to something I'm doing wrong? Or a compatibility issue with Safari? Here are the codepens I and a A screen recording (chrome on the left and safari on the right). Smooth Scroller On/Off https://codepen.io/bws_dan/full/MWrPEEN

Hey Jack. I took your advice and made a stripped down version and was able to solve my issue! https://codepen.io/bws_dan/pen/zYrQXYP I apologize for not seeing the issue was with my logic. I thought it was something due to the Draggable plugin. You're feedback and help along the way is much appreciated and helped me wrap this part of my project up. If I come across a similar issue I'll try a smaller scale test before adding another thread. Thanks again!

Hi All, I created a JS class that uses the Draggable plugin. Once I added a second slider to the codepen, it will only drag on the first slider. I checked the documentation and gave each one an id just to be sure. The strange part about it's when I try to drag the second slider. It moves the first one instead the the second. Can anyone tell me what I am doing wrong when creating my Draggable.create() on line 214?

Hi Jack, Stoping the global timeline makes may more sense than an empty one. And sure I totally understand only helping debugging GSAP related items. Thanks for taking a look!

Hi All, My question is when the slider is mid drag and you press one of the next or previous buttons. The slider jerks for a second if the drag isn't completed. I think this is due to: gsap.killTweensOf(slider); Is there a better way to strop the current drag and switch it to a different tween on click of the next and previous arrows?

Hi Jack, That was exactly what I was looking for! I also really appreciate your notes and explanation of them. Thank you!

Hi All, I'm having two issues with my current pen: • The draggable bounds don't seem to be working correctly. I'd like them to stop at the min and max. I've tried them as a query-able element or as an object (maxX, minX). • My proxy element is moving and affecting the drag space when it moves. Here's the pen I've been trying to emulate in gsap 3. This one is written in gsap 2: https://codepen.io/GreenSock/pen/JawEyN