StudioProjects

Thanks Matthew I think what's causing me grief is the slide-in navigator that I've built... I'll experiment with using your example as a template as you've suggested. Andy

Hi again! I've uploaded it to github at https://github.com/StudioProjects/barba also to Stackblitz at https://stackblitz.com/edit/web-platform-n7jjbk?file=index.html A huge thanks again for your valuable time in helping me with this! It's about time that I started using github, I've got a couple of hundred small projects and websites from when I was a Flash Dev 15 years ago...I've just returned to coding after an 11 year break and pretty much had to start from scratch over the last 12 months! My 57 year old brain is a bit overwhelmed, but I've made good progress Andy

Hi TheHaus! Thanks so much for your super quick response! I've changed to the new minified core, but the same problem applies, although its now changing to the projects.html page rather than the about.html page! I've uploaded it to https://www.frontenddevelopment.com.au/barba - you should now see a working css hamburger menu, rather than the white box, if not, please clear your cache. Andy

Hi! Thanks so much for your response! I added the .fixed selector to the css and the jquery on the hooks but the transitions still aren't working, the transition fires, and the slide-in menu is now retracted, but every page now directs to the about.html page. I've uploaded the site to www.frontenddevelopment.com.au/barba so you can see what's happening in-situ. If you click on the about button, there is no transition at all and the UI loads about.hml - if you click on any of the other buttons in the slide-in nav, the transition fires, but only partially, and the UI loads the about.html page on every button. The slide-in nav is now closed after the transition, so I'm definitely a step closer, but it's still not functioning as one would expect. The console is throwing any errors, so I can only assume that this is some kind of caching issue caused by Barba. To be honest, this library is sketchy and difficult to use and I'm nor a React dev so I'm not used to using hooks. I'll give it another day and if I can't get it working, I'll refactor everything for Swup and give that a go - its architecture appears to be far more stable and it appears to be far more user friendly than Barba. My apologies if my frustrations with this library are evident. What I'm trying to achieve is a simple transition between pages that is seamless, with the slide-in nav retracted after the transition fires. Thanks again for taking the time time to help me, it really is appreciated. Andy

I just noticed that all of the namespaces were set to "home", I've corrected this, but it's made no difference.

HI Folks! I've been trying (very unsuccessfully) to build a portfolio site with GSAP and Barba.js I initially built everything with CSS animations as per www.frontenddevelopment.com.au/dev, but failed to get it working yesterday, so I rebuilt it stripped down in a couple of hours today with GSAP. Unfortunately, despite following Barba's documentation, I cant seem to get it working and after 9 hours today I'm pretty frazzled. It may be something silly that I've overlooked due to being so tired. Obviously CodePen is not the right vehicle for a multipage site and I'm not enamoured with it enough to buy a full membership, I spent it on a Club Greensock membership instead. I know that this is a bit off topic, but GSAP and Barba.js is a formidable combination, so I'm hoping that someone can help me get this wireframe working! AS you can see form the site on my dev server, I'm also embedding canvas elements as well. Thanks so much! Andy :) about.html contact.html index.html projects.html main.js transitions.js main.css

Wow Guys! How good are the both of you! Thanks so much for your incredibly informative answers. Cassie (a video of yours on YouTube was what piqued my interest in GSAP after 11 long years without Flash), I will have a look at the resources that you have provided - I had a feeling that labelling may help! I will spend the morning looking at these and at your solution. Steve, your solution makes a lot of sense programmatically and I understand everything that you've done, which gives me hope - perhaps the few months that I spent delving into building games this year may hold me in good stead after all! I'm sure that a dull day spent looking at the wealth of material that the both of you have provided will allow me to build something for my little studio - www.studioprojects.com.au - my first test case. I had to liquidate my primary business www.coastalaudio.com.au due to a bad back, so starting from scratch at the tender age of 57 is not easy! I've been relegated to building WordPress sites for small businesses as secondary income for over a decade - yuk! After about a year of taking a deep dive into vanilla JavaScript and the Canvas, here's the current landing/holding page to my new website www.frontenddevelopment.com.au (and, believe it or not, registered business name!) - it's a fun exercise in combining Canvas with DOM elements. I specialised in Agency microsites back in the day (1492), thus my mention of GSAP and Three.js - I'm about a third of the way through the amazing Bruno Simon's Three.js course. I've also invested in Carl's Creative Coding Club courses to get my head around GSAP. It's all a bit overwhelming, but great fun! I used the Tweener prototype extensively when I was building Flash websites and I was delighted when I discovered that it was the birthplace of GSAP! I've managed to run the SWF's in the Flash player outside of the browser to circumvent the security block and at least get a portion of my old portfolio on video - https://www.youtube.com/playlist?list=PLjRhbej2e9NipUB0ufn7WTZrdgllnucPH - all the designs (apart from the Samsung sites) are mine - I'm not the greatest designer, but have a reasonable grasp of UI/UX (I hope) and HCI. My profuse apologies for all of the links (and my abridged life story), but I wanted to give context as to why I've quite literally thrown myself into the deep end! Thank you both for making feel like a member of a wonderful community, I'm looking forward to the remainder of my career, and as much as I miss my warehouse full of beautiful equipment, my back doesn't! Again, thank you both so much! Andy

Hi Folks I've (sort of) recovered from a nasty dental issue and I've been experimenting (in between bouts of pain) with some sliding panels. Please refer to the attached Code Pen, now that I've worked out its idiosyncrasies. My questions are as follows: Panel 1 - I've managed to get the text animated inside the panel, I've tried a few different CSS tricks to get the "BIG TEXT" sitting behind the other text as a watermark. Obviously I've tried z-index (and wrapping the three text elements in other divs inside the panel), but it appears to affect the entire text due to what I'm assuming is GSAP determining the z-index of the panels dynamically? Panel 2 - I'm trying to animate the two boxes without much success, I was under the impression that I could determine the trigger points using "left" and "right" properties, but this doesn't appear to work. Snapping - the panels are currently snapping at 50% of either the page width or height. This is probably a fairly complex way to start off with GSAP and ScrollTrigger, especially given that I haven't worked as a Front End Dev in 11 years (I was a Flash AS2 dev, anyway) and I'm still blowing the cobwebs out of my CSS skills - it's changed somewhat over the last decade (obviously for the better). I've generated the panels dynamically successfully, but as you can see the rest of my code is pretty clunky, to say the least. Any pointers as to how to make my code cleaner and to get things animating around the panels would be greatly appreciated. I've spent a full day on this and spent the last few hours of it running around in circles. I'm fairly happy with my progress, but I think I need to use another couple of loops to get it working properly. Thanks so much! Andy ?

Hey Jack! Thanks so much for your response! It would appear that the answer to my question is contained in Carl's ScrollTrigger Express course - I have a lifetime membership so I'll have another crack at it, I've seen some pretty glaring errors already! I try to be as self sufficient as possible and don't want to burden you guys, so I'll have another crack at it and keep you updated on my progress on this thread. I'm battling a nasty dental problem at the moment, so it may take me a couple of days...! Cheers Andy

Hi Folks What a wonderful thing GSAP is, thank you so much! I was a Flash AS2 developer 11 years ago and used your tween library religiously! I've just finished Carl's wonderful GSAP express course and joined his wonderful Creative Coding Club, I've yet to do his scrollTrigger Express course (i'll start it tomorrow as per my usual Suzuki Method), I threw myself in the deep end and built my first hand coded website in over a decade - my how things have changed! It would appear that the DOM has now caught up with Flash - albeit 10 years later! I have my little recording studio website attempt sitting on my dev server, I can't replicate the issues in CodePen and, to be honest, I don't like it anyway - I'm used to VSCode and Sublime text and a good old fashioned webkit browser. Please refer to www.studioprojects.com.au/dev - hopefully that will give you what you need to help me sort of the mess that I've created! I was feeling rather pleased with myself this morning until I started populating the site with content - such is life The issue that I'm having is as follows - I' currently in Thailand and working on my laptop which only has 1366 x 768 resolution on both the laptop monitor and the AOC USB monitor that I use as a second monitor whilst travelling. What I have built kind of works (at that resolution), but I can't add any more content to each section than is currently there already (it would appear that I can't have content any more than 200px above the bottom of the browser), it's most probably how I'm pinning things, I'm a little rusty with CSS, but it appears t be OK. When I test it on mobile (both off my dev and using dev tools) it breaks - no surprises given the complexity of what I'm trying to build as a first attempt after being relegated to WordPress (yuk) for a decade. It's probably something quite simple and I'm sure that I'll feel rather silly - any constructive criticism and advice are more than welcome - it's been a long time since I've tried to build something outside of the considerable constraints of WordPress. Best Regards Andy