Jump to content
Search Community

mulegoat

Premium
  • Posts

    36
  • Joined

  • Last visited

Everything posted by mulegoat

  1. 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
  2. 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.
  3. Back of the net! Thank you Cassie. God I'm such a goon
  4. 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
  5. That's twice in one week akapowl! Thank you so much - but i really should have caught that myself ?. Need more coffee
  6. 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
  7. 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
  8. That's brilliant akapowl! Thank you for your help
  9. 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
  10. 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?!
  11. 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
  12. 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
  13. 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.
  14. No worries. I will try and update the pen to include a proper intro animation so you can check performance
  15. Hi JH I'm doing something similar at the moment. I used the imagesloaded jquery plugin and referenced this tutorial from Petr Tichy which is an excellent place to jump off https://ihatetomatoes.net/a-simple-one-page-template-with-a-preloading-screen/ I made a quick demo here http://codepen.io/mulegoat/pen/Zeyeoa Hope it helps Cheers
  16. I'm no expert at this at all but could you tween css properties for the loader container from display none to display block like so: http://codepen.io/mulegoat/pen/xEvrYZ
  17. Hi Blake This works perfectly! Thank you very much for your help. One thing I'm trying to do is apply the click event to a class name rather than button? I've tried var buttons = document.getElementsByClassName(".js-button"); and then buttons.click(".js-button", toggleAnimations); It's no biggie though as I can just use it in a button. Was just thinking of a scenario where i might want to call the same function in a link within a text field. In any case, thanks again for all the help
  18. Hi Blake Many thanks for the time and effort here. All examples given are extremely helpful and well documented, but i'm having difficulty implementing this method with my project because the click handler is attached to object being tweened. Would it be possible to edit your last example to illustrate how to apply the reverse method to target a specific box where the click handler is not attached to 'this' box? IE Button 1 tweens box 1, Button 2 tweens box 2 (reverses/resets other boxes)? Understand if it's too much to ask, and am super grateful for the effort you've made. I've leanred alot with the examples you provided but I can't for the life of me figure out how to use map(createAnimation) to an individual box. Many thanks again!
  19. Wow. I go away for a couple of days and come back to this! Thanks a bunch Blake and co for helping me understand all this a bit better. I'll have a play and come back if there's anything else that comes up. One thing I'm still wondering though is what about a use case where the animations need to be different? Can the same / similar technique be used where the current animation just gets reversed. Also, and this is really crucial, how do you kill or reverse tweens that are active when the user clicks content outside of the tweened content area? Like i said, I'm going to play around with this and post back later but if anyone has any thoughts on this that would be awesome. Cheers again
  20. Hi there, I'm trying to build a UI with different components using tweenlite to add/remove items from the viewport. As I add more elements I'm finding that alot of code is getting repeated in my functions and although the animations applied to each element are slightly different, the principal behind them is the same, i.e. Add / Remove a class to an element with a click event and tween the element accordingly. E.g. (function openMainMenu() { var $openMenu = $('.openMenu'), $menuContainer = $('#jsMainMenu'); $openMenu.click(function(e) { e.preventDefault(); $(".openMenu").addClass("is--hidden"); $(".openMenu").removeClass("is--active"); $(".closeMenu").addClass("is--active"); $(".closeMenu").removeClass("is--hidden"); // slide menu in TweenLite.to($menuContainer, 0.2, {position:"fixed", zIndex:"998", display:"block", delay:0.1, right:"0%", bottom:"0%", ease:Power2.easeOut}); console.log("Menu Inview"); }); })(); (function closeMainMenu() { var $closeMenu = $('.closeMenu'), $menuContainer = $('#jsMainMenu'); $closeMenu.click(function(e) { e.preventDefault(); $(".openMenu").addClass("is--active"); $(".openMenu").removeClass("is--hidden"); $(".closeMenu").addClass("is--hidden"); $(".closeMenu").removeClass("is--active"); // slide menu out TweenLite.to($menuContainer, 0.2, {display:"none", zIndex:"0", delay:0.1, right:"-100%", ease:Power2.easeOut}); console.log("Menu Hidden"); }); })(); So clicking the button with class 'openMenu' hides the button, displays the close button and tweens the menu container into view. If you check the codepen demo you'll see a very similar pair of functions for a search container, and I'd also like to add an off-canvas contact form, search bar etc... What I'd like to know is how best to restructure my code so that 1. large portions of code to not get repeated, and, more importantly, 2. How to chain events so that if one element is active e.g. Main Menu, clicking outside of it or clicking Search Tours or another button activates the 'close' function on the main menu as well as opening search tours - or whatever else I add to the UI Many thanks in advance for any help
  21. Thank you Carl! Works much better now
  22. Hi there I'm using tweenlite for a few simple UI elements and am trying to chain two animations together. I have tried using the delay parameter but this only seems to work sporadically and Timeline seems like it would be overkill. Example below http://www.onceupononline.com/boats/racing-boats/carbon-3 The first animation occurs when clicking the 'i' icon (top right of page) which animates an off canvas panel ($copyContainer) in and the second, the reduced opcaity of the fullscreen image container ($rsContent) - which i want to run after the panel has animation has finished. It seems to work fine on first go when animating in, but when going in reverse it can get a little janky so i'm wondering how to improve this. I can put something on codepen if needs be. Just thought i'd see if there is anything obviously lacking first incase my syntax is wrong since i get a console message of 'invalid delay tween value: 0.5 ' My code is below: jQuery(document).ready(function($) { (function animateInOutCopy() { var $openCopy = $('.openContent'), $closeCopy = $('.closeContent'), $copyContainer = $('#copyContainer'), $rsContent = $('.rsContent'); $openCopy.click(function(e) { e.preventDefault(); $(".openContent").addClass("is--hidden"); $(".openContent").removeClass("is--active"); $(".closeContent").addClass("is--active"); $(".closeContent").removeClass("is--hidden"); // slide copy in TweenLite.to($copyContainer, 0.4, {css: {right:"0%"}, ease:Power2.easeOut}); TweenLite.to($rsContent, 0.4, {css: {opacity:"0.10", delay:0.5}, ease:Power2.easeOut}); console.log("Copy Inview"); }); $closeCopy.click(function(e) { e.preventDefault(); $(".closeContent").addClass("is--hidden"); $(".closeContent").removeClass("is--active"); $(".openContent").addClass("is--active"); $(".openContent").removeClass("is--hidden"); // slide copy out TweenLite.to($copyContainer, 0.4, {css: {right:"-50%"}, ease:Power2.easeOut}); TweenLite.to($rsContent, 0.4, {css: {opacity:"1", delay:0.5}, ease:Power2.easeOut}); console.log("Copy Hidden"); }); })(); }); Many thanks for any and all help or suggestions M
  23. Yes, was loading latest versions of all scripts - Tweenmax, scrollTo & jquery.gsap.min.js When i revert back to 1.10.3 everything works Will add a Pen tomorrow
×
×
  • Create New...