Jump to content

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


  • Posts

  • Joined

  • Last visited

About mulegoat

Recent Profile Visitors

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

mulegoat's Achievements

  1. 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?!
  2. 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
  3. 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
  4. 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.
  5. No worries. I will try and update the pen to include a proper intro animation so you can check performance
  6. 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
  7. 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
  8. 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
  9. 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!
  10. 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
  11. 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
  12. Thank you Carl! Works much better now
  13. 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
  14. 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