Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About Mattrudd

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Mattrudd's Achievements

  1. @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 😄
  2. 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!
  3. 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 (🌊⬅️🐢⬅️🥚🏖️)
  4. 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.
  5. 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!
  6. 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 😬🤠😨
  7. 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.
  8. 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!
  9. 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.
  10. 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' 😬
  11. 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!
  12. @siw Just to say - love the effect, really creative!
  13. 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.
  14. 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
  15. 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.