Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

6 Newbie

About mulegoat

  • Rank

Recent Profile Visitors

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

  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-initializin
  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 leanre
  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 a
  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.cl
  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. I
  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