mulegoat

You could try modifying this demo: https://tympanus.net/Development/GooeyCursor/index.html Although you could probably make it without any canvas by creating a fixed position div with 100vw and 100vh and filling it with a bunch of child items to create your grid squares. Set the squares to opacity:0 and transition to 1 on mouse hover? E.g. https://codepen.io/mulegoat/pen/RwqZmBQ Note: this is a very quick and dirty solution. I'm sure there are many better ways to achieve this effect

ImagesLoaded is a separate library that your page needs to load along with GSAP and before you run the code powering this slider. ImagesLoaded is used here to preload images before initializing the slider.

Client on viewing the accordion:

Back of the net! Thank you Cassie. God I'm such a goon

Hi everyone, I've got an issue with an accordion that I cobbled together after viewing a thread on here. Zachs original pen used a basic tween to toggle open/close states https://codepen.io/ZachSaucier/pen/gOWGKQZ I ammended mine slightly to use a timeline to tween the accordion content and animate the menu icon. Works fine however I have to click the accordion menu item twice before it works? After the first item is expanded everything works as it should but I can't figure out why that extra click is required at the start? Any help would be great. My accordion function: function initAccordion() { const accordion = select('.js-accordion'); if (!accordion) { return; } else{ const groups = gsap.utils.toArray('.js-accordion__group'); const menus = gsap.utils.toArray('.js-accordion__menu'); const animations = []; groups.forEach(group => createAnimation(group)); menus.forEach(menu => { menu.addEventListener('click', () => toggleAnimation(menu)); }); function toggleAnimation(menu) { // Save the current state of the clicked animation const selectedReversedState = menu.animation.reversed(); // Reverse all animations animations.forEach(animation => animation.reverse()); // Set the reversed state of the clicked accordion element to the opposite of what it was before menu.animation.reversed(!selectedReversedState); } function createAnimation(element) { const menu = element.querySelector('.js-accordion__menu'); const box = element.querySelector('.js-accordion__content'); const icon = element.querySelector('.js-accordion__icon'); gsap.set(box, { height: 'auto'}) gsap.set(icon, { rotation: 90}) const tlAccordion = gsap.timeline({ reverserd:true, paused: !0, onComplete: updateLoco }); // Keep a reference to the animation on the menu item itself tlAccordion .from(box, { height: 0, duration: 0.5, ease: 'power1.inOut' }) .to(icon, { duration:0.25, rotation:-90, ease:'linear' }, '<'); menu.animation = tlAccordion; animations.push(tlAccordion); } } } Many thanks in advance Marco

That's twice in one week akapowl! Thank you so much - but i really should have caught that myself ?. Need more coffee

Hi Jack, Many thanks for your reply. Appreciate that it's hard to troubleshoot. If you look at the screenshot of the site it seems to add a native scroll container to the page. It seems to only get added on the page with the pinned element. It's not that obvious but if you look at the page with the pinned element there's a border line and light grey background on the right of the page that isn't there on pages without the pinned element. If you look at the pen in full screen mode you'll see the difference where the width of the scroll container element doesn't fill the entire page. Hope that helps, Thank you for the kind words about the site. As a greensock user since the flash days it means alot. You guys are amazing

Hi everyone, I'm having an issue when trying to pin an element using scrolltrigger with locomotive scroll. When I try to pin an element the width of the scroll proxy seems to get changed (or a scrollbar adrea added, I can't figure out which). You can see an example here: https://staging.taylorandmoor.com/our-collections/ I've also attached a screenshot. On all other pages the scroll container (.scroll-container) is 100vw. I can't recreate the issue in my basic codepen either? I've set pinSpacing to false but is there anything else that could be causing this? Many thanks in advance for any help

That's brilliant akapowl! Thank you for your help

Hey everyone, I'm building this site: https://taylorandmoor.com I'm using locomotive scroll for smooth scrolling and scrolltrigger for various animations. One animation is to show/hide the main navigation header on scroll. As you can see this works on the website in its current state however I'd like to implement it without using locomotive data-scroll-sections. If you look at the codepen you'll see that the animation gets triggered on scroll down but not on way up until it gets back to the top. The code I'm using for this function: function initShowHideHeader() { const header = select('.js-site-header'); const showHeaderAnim = gsap.from(header, { yPercent: -100, paused: true, duration: 0.3 }).progress(1); ScrollTrigger.create({ scroller: scroller, start: 'top top', end: 99999, onUpdate: (self) => { self.direction === -1 ? showHeaderAnim.play() : showHeaderAnim.reverse(); console.log(self.direction); } }); } I'm guessing the onUpdate function is not working properly which is strange because when I console log self.direction -1 is logged on scroll up? If anybody has anhy insight into implementing this sort of this that would be great! Many thanks

Zach you totally nailed it! Switched those two statements around and everything works fine. Thank you so much for taking the time to help...I figured this wasn't a Greensock issue but it's sooo hard to not post on here when the support is always so good!! Barba does have a Slack channel but who wants to live like that?!

Hi everyone, I'm trying to implement some simple scrollTriggered timelines to a project that's using Barba.js for page transitions and locomotive scroll (with [data-scroll-container] as the ScrollTrigger Proxy). I've managed to get it working on first page load however after transitioning to another page the same timelines appear very janky. If you check teh codepen demo you'll see that images scale smoothly on the index but not the about page. I've tried killing all ScrollTrigger instances with Barbas beforeEnter hook but I think I must be doing something wrong when re-initializing locomotive scroll. If anybody has any experience in using these libraries together and has any advice that would be great! Many thanks https://codepen.io/mulegoat/project/editor/XvJVNP

When stuff like this happens, then yes! But it's pretty rare and it will likely be fixed by the time I've written this. Upside of CDNs are better performance, caching, automatic version bumps if you want to load the latest versions (though this can also cause issues with breaking changes) etc but it depends on the site you're running and your server capability. Personally I've never had any issues hosting files locally...but servers can go down too

Looks like a problem with the Cloudflare CDN and it's affecting all file hosted there, not just GSAP. I moved my js files to local server until it's fixed.

No worries. I will try and update the pen to include a proper intro animation so you can check performance