Jump to content


  • Posts

  • Joined

  • Last visited

About mulegoat

mulegoat's Achievements


Newbie (1/14)



  1. No worries. I will try and update the pen to include a proper intro animation so you can check performance
  2. 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
  3. 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
  4. 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
  5. 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!
  6. 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
  7. 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
  8. Thank you Carl! Works much better now
  9. 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
  10. 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
  11. Hi there I updated to the latest version but get an error on line 12 in the scrollto plugin file: Uncaught TypeError: Object function (a, c, b, j) { return new C(a, c, b, j) } has no method 'plugin' Is there something i need to amend in my js code when calling this function? Example code: (function itineraryScroll() { var scrollSection = 1; $("a.nextDay").click(function(e){ e.preventDefault(); if(scrollSection < 20){ scrollSection++; } TweenMax.to(window, 0.5, {scrollTo:{y:$("#itinerary-day-" + scrollSection).offset().top-100}}); }); $("a.prevDay").click(function(e){ e.preventDefault(); if(scrollSection > 1){ scrollSection--; TweenMax.to(window, 0.5, {scrollTo:{y:$("#itinerary-day-" + scrollSection).offset().top-100}}); } }); })(); Only testing this locally but can put on a live link if need be. Many thanks for any help M
  12. That is SO much better !! I was hoping to add the updated navigation style like you've done with the currentTab function - this is fantastic. Thank you so much for your help. Now I am off to study your code
  13. Apologies, I did not mean deeplinking in regards to the url change, just accessing a particular slide within the list as opposed to mapping the div classes to a list. The code is based on a codepen by Greensock http://codepen.io/GreenSock/pen/iLosa If you have any better ways of achieving this that would be great
  14. Hi there I have a nav that links to slides with tweens in between. The slideshow navigation works fine by loading each slide according to it's position on the list. See the following pen http://codepen.io/mulegoat/pen/ruHhD The problem I'm having is trying to link to a certain slide from within each slide. Using the following code works on all but one "Link to page 2" link - in this case, the link within the first slide - but on my localhost its slide 5 where the link fails. I know this is more of a jquery issue but though I'd put it up here incase somebody had a better way of doing this with getElementById or something else. Many thanks for any help function initActionPlan() { $(".actionPlanLink").each(function(index, element) { $(this).on("click", gotoActionSection); }); } function gotoActionSection(e) { if(currentSectionNum != $(e.currentTarget).index()){ if(currentSection) { TweenLite.to(currentSection, 0.5, {autoAlpha:0}); } currentSection = $(".tabsContainer")[1]; TweenLite.to(currentSection, 0.2, {autoAlpha:1}); } } //OpenClose Action Plan function actionInit(){ initActionPlan(); $(".actionPlanLink")[1].click(); } actionInit();