Mattrudd

Sorry for being slow here... added an opacity: 0 tween on the exit cursor within the onComplete... exit cursor remains after exit so I'm not quite understanding fully just yet. https://codepen.io/matt-rudd/pen/RwMqjPK One more nudge? ?

?‍♂️ Thank you!

Hi @Cassie! Thanks for that - I knew I'd seen something along those lines! Not sure this is working fully for me though - as the exit cursor survives the lightbox close...could just be my browser?

Hi folks, I've set up a video div that opens a video Lightbox when clicked. I'm using a custom cursor to nudge user interaction... the issue I have is the transitions between 'PLAY' and 'EXIT' are a little clunky. I've cobbled together some short GSAP tweens in if/else statements to manage the showing and hiding of the relevant cursors. The issue - if the mouse isn't moved at all once the Lightbox is opened, exit won't appear, because of course the event listener is set to "mousemove". Conversely, if the mouse isn't moved after exit and the cursor is over the blue thumbnail placeholder, it continues to show exit. Appreciate this is standard behaviour, but in this particular instance it's not great for UX (exit still displayed after exiting!) I'm wondering if there's an adjustment or a GSAP capability I've not aware of I could add to my tweens to allow for the hiding of the EXIT cursor automatically when the video Lightbox is no longer in view? Had a look at quickSet but the examples there with cursors seem to be centred around mouse movement also. P.S. the demo is as minimal as I could think to get it while still showing the lightbox in action!

@akapowlAhhhh lovely stuff. Thank you! P.S. After following your advice and getting stuck into all the docs and supporting how-tos, I've FINALLY managed to get my head around barba.js transitions. ScrollSmoother certainly made it a lot simpler, but it was a bit like learning to wheelie on my bike when I was 10... one day, it just clicks Thanks again for nudging me along with that stuff ?

Hi, had a good go at adapting another variations of this to ScrollSmoother too (this one where the titles pin momentarily before fading up and outhttps://codepen.io/akapowl/pen/BaKPMPM/256175b2dab5ddca7073dbc0e64e606d) Not sure what I'm missing to make the pinning work to achieve that momentary text 'pause'? Have tried a few things such as adding height to the wrapper to replace .scroller etc. Also not sure why the structure falls apart after orange panel? Having read the ScrollSmoother docs, thinking this is something to do with replacing the .scroller container with the right CSS for the 'smooth-content' container. https://codepen.io/matt-rudd/pen/abqGyBY Thanks as ever!

Just posting this here to increase the eyes on it... really need a fix. Hope that's ok? Planning to post all details of a fix on this thread after the work's done, hopefully to help others on a similar journey (?⬅️?⬅️??️)

Hi there, I'm looking for help to complete a project - my freelance portfolio. It's a two-page framework I'm building to showcase my creative work. I'm seriously stuck - have been learning javascript, GSAP and now barba from scratch, and just can't seem to find a solution, despite reading through the amazing forum here and receiving some direct help. It's highly likely that I've not set up my timelines and ScrollTriggers fully as they should be! I've read and watched pretty much every tutorial out there about how to combine ScrollTrigger, Locoscroll and Barba, but can't figure out how and where to implement the necessary inits and kills to make sure that everything works as it should in combination. Here's the project so far: https://stackblitz.com/edit/web-platform-naq1gl?file=js/app.js The specifics of what I'm looking for: The timeline on the index page working fully The loader in and away transition working when link to subpage is clicked (no real issues here at this stage!) The subpage pinned sidebar timeline working on both first load (it only currently works after a manual page refresh) and subsequent loads as barba.js replaces the container in the DOM. Some brief annotations to explain what changes were made to the JS/hooks/views etc to get this functional. My budget for this is around $100 dollars, as I believe this fix isn't a big/long job for someone well-versed in these three libraries. Thanks in advance - I'd HUGELY appreciate a fix for this.

Thanks loads @akapowl. I understand. I'm a designer/writer and so the complicated logic required here doesn't come easily to me... spent time grasping each of the three libraries/JS language but then there's the added requirement of engineering them together of course. That's science, and I'm more art ha! Thanks for being so patient with my beginner questions ? Think I got the project framework so close with your kind help to what I'm after, that I started jumping steps again - to the extent that I wasn't even factoring in orders of execution! I'll go back to the beginning - really helpful to be guided towards a few things. Failing that, might be time to try and get a bite on the jobs board again!

Forgive me for resurrecting this thread... getting so very close here, and learned a ton in the last few days of reading/experimenting! @akapowl I responded to your advice about running two different sets of JS for the two pages in my project. I'd read about barba views before and think I've got my head around them after some great help from @Ihatetomatoes Youtube piece on views! (thanks!) Added the 'view' on line 91 (tried to minimise this project down as much as possible!) https://stackblitz.com/edit/web-platform-dyckmk?file=js/main.js Got the second page JS to load as a function within this view, but at the expense of breaking the ScrollTrigger pinned sidebar tween. I've a strong idea the fix is about refreshing ScrollTrigger in some way... have tried to work out the right place to do this/connect the Barba/GSAP plumbing properly - but alas after studying all the help out there and scouring this forum I'm struggling to identify where this needs to happen. Thinking maybe it's simply a case of finding the right place to add ScrollTrigger.refresh(); ? (Tried adding a barba 'Enter' sub-hook within the same 'view' but no joy.) Feels like my brain is experiencing that 'freeze' right before a thaw of understanding hits! Appreciate I'm still in tenuous GSAP connection territory here, but as this is linked to getting ScrollTrigger to work on the second page (in my view at least, pun intended!) I thought I might just sneak it in ???

Hey Cassie, thanks for mentioning! I fully intend to sign up as a club member as soon as possible (I've already had more than the fee's worth in forum support alone!) so I'll swap that out.

You sir @akapowl, are the MAN. Incredibly grateful for your help and this generous platform. Successfully got Loco scroll to work and added a tween back in - just need to figure out what's causing the scroll issue/preventing the subpage from scrolling to top on enter. Think it's to do with the '.is-home body' class which is something I'm not familiar with, so I'll get digging there. https://stackblitz.com/edit/web-platform-9uhzjr?file=css/app.css. Thanks again!

Hey so I've done my best to strip down further (figured you meant removing all animation code from main.js), added the missing reference to swipeup, added the reference to the subpage.css on index.html and also the missing css for the loader SVG. https://stackblitz.com/edit/web-platform-7jbj9m?file=js/main.js It did occur to me that it'd be better to have two JS files for each of the pages - I struggled to find any info or examples of how to make that work with barba to be honest. Totally understand in terms of getting my head more into barba - I've watched lots of videos and read through the docs in detail, but found it a stretch to apply the hooks/required kills and refreshes with my particular set of demands - an svg transition between pages with ScrollTriggers and Loco Scroll.

Hi @akapowl - hahaha it is indeed a greatest hits compilation of your work on here. Hope you take it as a massive compliment - every time I searched for the effect I was after, your answer appeared! 'Talent borrows, genius steals' so the saying goes, except I have neither trait - certainly not where coding is concerned! Not at this pretty early stage any way ? Steadily hoovering up on JS learning as I go. Incredibly kind of you to offer your help! Unfortunately I've run into some trouble porting a stripped down version to Stackblitz - not very familiar with the platform - can't seem to get it to load as a page (blank page in Chrome, Safari gets stuck 'connecting to dev server' but does seem to half-work in the edit preview! Here's the link all the same... https://stackblitz.com/edit/web-platform-7jbj9m?file=js/main.js (The same code appears correctly back in Codepen, with Loco Scroll functioning, but I do appreciate you can't fork this...https://codepen.io/matt-rudd/project/editor/ZKoPzr#) Just for context, what I'm aiming at on the finished site is barba links to four subpages from the horizontal section (only one of these subpage added for simplicity sake!) Here's the transition animation I built: https://codepen.io/matt-rudd/pen/xxpepJd Looking to incorporate this SVG animation as the barba transition, but as you can see the way I've poorly added it to my project just results in a lovely white block at the top of the screen ? What would be amazing is to get to a stage where I can add back in my other GSAP animations to the 'setupScrollTriggeranims' function in barba.after hook, and it all 'just works' ?

Hi folks, I'm struggling to work out why the GSAP transition isn't firing as apart of the barba.js transition? https://codepen.io/matt-rudd/project/live/ApLrbb (Ignore the 404 below, link works!) I've read and re-read pretty much all the other GSAP/barba.js/loco scroll posts on here, tried to dissect @akapowl's stackblitz but can't fathom what I'm doing wrong - likely around killing and refreshing the ScrollTriggers, or potentially some basic errors in my functions? Been staring at this for days. This seems like the very last technical hurdle I'm facing...so any insight at all will be massively appreciated!

@siw Just to say - love the effect, really creative!

Wheyyyyy thanks so much @OSUblake! Saw your post ping up last night but for some reason missed the pen attached... so had a go myself and got almost as far before double checking your last response... started to overcomplicate a little with a 'gsap.utils.toArray' for the panel animations when it just needed the simple tl.to. Removed the black div, added the text fade and sorted! Even learnt how to add a slight delay on the paragraph fade. Amazing what you can discover actually reading the instructions ? https://codepen.io/matt-rudd/pen/YzEdQYq Grateful for persevering with me.

Had a good go at it, but I think it's the panels.forEach(panel => { let content = panel.querySelector("div"); line that's throwing me - not sure what to replace that with - but I know that's a JS issue. So it's a bit broken, and that's before I've got onto the initial title changes! Feel like I'm edging a little closer though... https://codepen.io/matt-rudd/pen/yLPQqJq

Great thanks for the lead. From here it's just getting my head around how to strip things back as per your guidance. If I understand correctly it's a case of calling the ScrollTrigger function at the start of the timeline for the main container, then embed the title switch and text fade tween in the timeline.

OK thanks - have made an attempt at collating things into a timeline - it's not a good one! Will do some more digging. https://codepen.io/matt-rudd/pen/KKyrQpg

@OSUblake Sure - thanks - let me try and explain a bit more clearly... I'm looking to replace the black div (first layer that scroll up) with the blue div that precedes it. That will result in the blue div cycling through the three pinned titles, and as this sequence finishes, it will then be the blue layer that scrolls up to reveal the grey div beneath, with the text fading as it does currently. Current setup: Blue div at top, pinned titles switch on scroll Blue div un pins and scrolls up Black div follows Black layer scrolls up to reveal grey pinned div Text in grey div fades out on scroll Grey div unpins after all text has faded What I'm looking for: Blue div at top, pinned titles switch on scroll Blue div un pins and scrolls up - but crucially acts as a layer in the same way black does currently Grey div revealed underneath Text in grey div fades out on scroll Grey div unpins after all text has faded I've tried a simple swap of black for blue, placing the top blue div within the '#paragraph-container' that's working the layer effect, but this throws everything off. I'm very likely making this more complicated than it actually is, but I think the pinning of titles in the blue section necessitates some more control of the spacing - just not sure of the best method for this. Hope that all makes sense - thanks for your time as ever!

Hey @OSUblake - seems to be one of those Codepen instances when you have to open as a page/'edit on Codepen'- I gather like me the pen isn't scrolling as a forum embed...

Hi, struggling to get my head around the best way to do this... what I want to achieve is for the blue top section to cycle through 'one, two, three', then scroll up out of the way to reveal the grey section, which begins to fade only after the top layer is out of view. Essentially it's replacing/removing the second black 'one' layer with the blue above, with the obvious difference that the blue layer unpins and moves up and out only when the titles have finished cycling through. As ever I've tried lots of combinations - pretty sure I've got my end points wrong, maybe even pinning the wrong containers? As usual I think the solution is a simple one but I can't quite combine the right settings! Many many thanks in advance!

@GreenSock Thanks Jack - it was literally as simple as taking the hover element out of the main container. Genuinely considered it to be something I was getting wrong with my GSAP settings! I am trying to stick to the script here (pun intended).

Hi folks, trying to integrate a cursor change on hover (a play button over a video thumbnail). I can't seem to work out why, when I add the hover section to a page with ScrollTrigger, the button appears above (offset - vertically up the page from) the container and not over it as intended? Tried lots of variations of thumbnail container CSS positioning so wondering whether I'm missing something in my scroller proxy settings?