Mattrudd

@Cassie absolutely spot on thank you so much mate! Performance on good ol' Safari isn't exactly stellar even without my usual 8001 open tabs... but I'm guessing that may be just a Codepen iframe thing. Famous last words but this was pretty much the last thing to sort on my portfolio project framework, so extra grateful points to you. Have a great bank holiday! ?

Back once again with the ill (GSAP) behaviour... I've two issues with implementing a hover-image on scroll. 1) I've adapted an example I found on here, tweaking the mouse enter effect by adding a timeline with specific animations. Something gets all janky when either scrolling between hover items or leaving... the .hover-reveal__inner flicks to the scale: 0.3 size in the timeline. It's bound to be to do with my mouseleave setup but I'm lost as to the best way to fix it. Ideally I'd have a separate mouseleave timeline with slightly different animations to enter... appreciate it's not as straightforward as it may initially seem now I've tried. I read the thread about the complexity here, but struggled to apply those ideas to my setup, mainly down to having the quickSetter in the mix (which is mad clever, naturally!) for cursor follow. 2) Adding ScrollSmoother means the .hover-image (position: fixed) doesn't behave the same way... tried moving this outside the scroll-wrapper but it's not that simple... unsure as to the best approach for this? Likely needs a clever way of negotiating with the ScrollSmoother transforms. Thanks loads ?

Brill thanks as ever @Rodrigo! (I posted again just as you replied). I think I may just drop the anchor clicking all together and just rely on the scrolling to advance/go back. Especially as I'm not convinced many people will use that method of navigating on this particular design! Appreciate my example pen is WAY more complicated than normal... and I totally get you about overcomplicating the approach... another lesson learned in terms of saving time by designing a fresh approach from scratch rather than trying to reverse engineer things! Thanks again dude - your time and help is very appreciated.

This is about as close as I got... admittedly leaning a little on gtp 4 for a few suggestions (which I know isn't ideal, but been staring at this a few days now!) The vertical progress bar far right is jittery when the height animates, and clicking the tabs is erratic, especially clicking to a previous tab as described above. So something is amiss with my approach! https://codepen.io/matt-rudd/pen/YzJgXqY

Hi folks, I've repurposed a design Timothy Ricks made available - via his great Webflow tuts but my project is raw code. The original setup had a sticky container that I've changed to a ScrollTrigger pinning. All works as desired until I switch ScrollSmoother on... clicking backwards through the tabs e.g. Build > Design or Build > Plan... back up the achorLinks index 2 > 1 > 0... doesn't play well with the animations. Appreciate this isn't exactly a minimal pen so forgive me there ? - but felt I needed to give the context. Pretty sure I need to modify this section... have tried loads of options but can't quite nail it, so have returned the JS back to Timothy's code plus my added ScrollTrigger. let anchorLinks = component.find("[tr-anchors]").children(); anchorLinks.on("click", function () { let myIndex = $(this).index(); let scrollDistance = triggers.eq(myIndex).offset().top + triggers.eq(myIndex).height() - 1; $("html, body").animate({ scrollTop: scrollDistance }); }); ? as ever

I made this a while ago - not sure what my logic was there at all in hindsight! Just seen this response - thanks loads @Rodrigo ?

Hi folks, I'm edging nearer to finishing my site - one of the last pages I'm adding to production is a pinned left column holding an image, with a Lottie eventually pinning in the right column. The way I've set this up is probably pretty clunky*... Main issue - the Lottie animation pins and plays fine within its container in Chrome, and also in a Codepen in Safari... BUT - the live site viewed in Safari doesn't show the Lottie in its container, despite the container pinning... in fact it's greyed out in the Inspector. Weird? An issue with my Lottie setup? Bad CSS? yet another Safari bug? My usual disclaimer, pleading forgiveness for what may be another face-palmingly obvious issue. I've come a heck of a long way with web dev over the last year or so, mainly down to the support I've received here... but most of my coding efforts happen in the stolen hours late at night... de rigeur! *A side issue... I'm manually timing when the right and left columns unpin... I'm using vh on .left-side-column and a .spacer-div to very clunkily try and match when the right column (bmx image) unpins with when the Lottie anim on left itself completes and unpins... pretty sure I need to investigate an onComplete function here, as there's a bit of a lag/it isn't very practical across viewport sizes) Thanks a bunch as ever ☺️

@Rodrigo thanks for that, kind of you… I think I’m going for a jquery solution that uses a document.onreadystatechange function… Just still unsure about pros/cons of faking the loading duration is all!

Hey @Cassie! Hope you're really well. Just curious - found this thread after searching high and low for the right mix of imagesloaded.js/preload.js style preloading library to hook up with a GSAP progress animation... Pretty much all the walkthroughs/examples I can find don't link up to real asset/page load, as you mentioned... they just use a callback on preload complete, firing a timeline with an arbitrary length. Maze of options to tie the animation to real progress, which is my preference! So my question - why would you recommend linking it to real page load time? My instinct is that's a bit more honest and UX friendly... but also keen not to have a progress bar fade out too early, say if it's not reached 100%.

@PointC I read the book 'Atomic Habits' recently and it talks about managing our precious brain calories... so a lot of laziness is productive! At least that's my take on it. ? Thanks for this genius alternative perspective! That really is neat, as you folk across the Atlantic say ? Love this forum.

Forgive me for returning to this, but as I've come to add this layout to my site, I've been reminded of how my method for drawing borders is really flawed. ? The really elegant solution for shortening/lengthening borders on resize is great, but the way I've used spans for horizontal and vertical lines on each grid square isn't suitable for displaying the same ordered grid shown in the first 4x3 version below. When the layout shifts to 3x4, 2x6 or 1x12 as screen size reduces, the lines obviously don't match the new grid order as desired (no top border on top row, no bottom border on bottom row). Trying to work out a way to use :nth child much more fully combined with media queries, but curious to see if there's a more effective way... using gsap.matchMedia() or maybe even Flip?

Absolutely this... thanks @GreenSock!

***Update... Hmm - it would appear I'm still getting the 'undefined' error with Safari, which is a bummer!

That's really strange! I was getting the 'undefined...' error on both Chrome and Safari on my end, and as you say it does now seem to be working! I just tried the pen fullscreen in a Chrome Incognito window, and it didn't cycle past the first 'logo' header that animates in from the right. It took a few scrolls to show headings 2 to 4 - which makes me think there's still some kind of issue with my code... But no wonder it baffled me - thought it was just another big gap to fill in my dev knowledge! Thanks for your time, hopefully it was just an isolated thing on my machine.

Try now? May have been I'd momentarily commented out the ScrollSmoother setup just when you viewed!

Happy Monday folks... just when I thought I'd finally finished my site, one last* issue Have been looking at this one all day... can't seem to come up with the correct way of incorporating ScrollSmoother into this ScrollTrigger setup (which was the subject of a previous forum fix ?) When I add ScrollSmoother into the setup, I get the error: 'undefined is not an object (evaluating 'self.previous().end')' I've not yet found a way to add in ScrollSmoother properly so the previous() function works as it does when ScrollSmoother setup is commented out. The previous ScrollTrigger function is a bit advanced for me, but would be great to get this working so the animation plays with ScrollSmoother switched on. Any ideas on where I'm going wrong/what I'm missing here? Tried removing normalizeScroll - have a feeling it's to do with incorporating the 'scroller' constant properly. Thanks in advance! *hopefullyyyyyyy!

Hey @GreenSock, must've missed the notification on your reply - my bad, busy Easter. Hope you had a great one. This is great, thanks! Having seen my first desired outcome in action, it'd probably be cleaner for the lines snap straight to their reduced length on resize (rather than the easing used in the first grid draw on initial page load)... but that's a general thing for me to go away and read up on rather than a specific GSAP issue. Never used a logical AND operator before, so I'll start there ha!

Hi there, hope anyone reading had a great Easter! I've a grid where lines animate in on the horizontal and vertical. Just learnt about the getProperty method... so simple! https://codepen.io/matt-rudd/pen/LYgVomN What I've not managed to grasp after researching and trawling the forum is how best to apply a window resize event so that if the user resizes the window, the gridWidth and gridHeight update accordingly - to rematch the length of lines with the size of the grid object. I guess there are a few options, in theory: A way of animating the lines down in length to match the smaller grid after window resize An instant 'snapping' of the line sizes down to match the smaller grid after window resize A complete reload of the timeline to redraw the grid after window resize The first option is the dream ? Think I've got half-way to getting my head around GSAP modifiers and a window resize function, but I'm not quite sure how to stitch it all together for my use case. *** EDIT - Just realised there's the further complication of managing the lines of the smaller grid after grid-template columns have shifted! Thanks in advance!

Happy Friday folks... Currently scratching my head trying to work out how to set the start of the second scroll trigger (the one managing the text-container tween up) so that it fires precisely half-way through the Lottie animation. In short, the text-container on the left (holding yellow and orange blocks) moves up as I want it to (yellow block up to display orange block) but not when I want it to. Of course, setting the start position of the trigger (Lottie element) to 50% only relates to spatial rather than temporal measurement ? I can tweak the start and end offsets manually to match where the Lottie animation is at, but just wondering if there's a more precise way of doing it? Maybe not, or not worth it, but curious nonetheless. Ta!

Aha! Thanks @GreenSock

Gotcha - an if else statement. Thanks! The minus in front of the brackets in the first one I quoted throws me... Incidentally, I ended up going back to the template to reset all the widths I'd edited and confused! https://codepen.io/matt-rudd/pen/PodjLMO Think I've got there... the last panel with the mask is just shy of being responsive, as my clunky way has to cater for the left padding of the first block (I wanted this so that the horizontal content sweeps into the viewport from the right rather than simply going from still [in-view] to moving)

Ah of course! That makes sense. Now to get my head around the solution related to: var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); And also need to properly grasp ternary operators e.g. x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()

@GreenSock Thanks, I think I'm a little wiser - I've balanced the CSS values like that to try and get the difference mask moving over... That's correct - I'm wanting the horizontal movement to stop when the end text is centred, then the difference mask moves over, then once the section is all white, it unpins and moves up to continue the vertical flow of the page. I've got very close to balancing it all better than the above pin, and then got confused again with all the width settings! Apologies that it turns out to be a CSS not a GSAP issue thought - I'll colour up the different elements and try and work it out! One thing though - I've used the 'relative to the start' prefix a fair bit recently, but what threw me with this example is the "+=" without a numerical value following.

'Sup GSAPpers! Wondering if you generous bunch could help me... I'm modifying a horizontal scroll example that I'm pretty sure @akapowl shared on here to incorporate a black to white difference transition before the pinned horizontal section scrolls up. I've managed to pull this off, but what I'm struggling with is shortening the length of the horizontal scrolling section. It stems from not fully understanding the Scrolltrigger end function: end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth), I've tried modifying the widths of all the different elements including .pin-wrap and .animation-wrap, but the length of this section is obviously set by this end function. Sure it's simple enough when you know... but "+=" used in this way is new to me... is it an addition assignment? Tried to unpack this on my own but not got very far (late here in the UK, which isn't helping!) I think once I get my head around this I'll be able to shorten the horizontal section and have the text pin centrally in the viewport while it transitions black to white before unpinning vertically up. Hope that's a good enough explanation? Thanks you lovely bunch.

Nailed it again @akapowl. Thank you! ?