ainsley_clark

Members
  • Content Count

    22
  • Joined

  • Last visited

Community Reputation

11 Newbie

About ainsley_clark

  • Rank
    Member

Recent Profile Visitors

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

  1. ainsley_clark

    Tweening back to original value

    Thanks. A combination of above helped. ☺
  2. ainsley_clark

    Tweening back to original value

    Wow thank you for both of your replies. @Dipscom - surprisingly, even the class change it didn't work! @Mikel - you have actually solved one issue that I was having and I didn't even mention it! Legend. What happens if we change the background colour of the buttons though? How do we revert back to the original colour? Thanks again.
  3. ainsley_clark

    Tweening back to original value

    Hi Dipscom, Thanks so much once again. Still no luck Updated to: var navTL = new TimelineMax({paused: true, onReverseComplete:clear}); And if i wiggle back and forth the nav bar it reverts to the same colour. www.ainsleyclark.com/test/index.html
  4. ainsley_clark

    Tweening back to original value

    Hi Dipscom, Thanks for your reply again. Upon rolling over the link, the .circle(s) still dont go back to their original colour. I have updated the link I gave you with the code below. var navTL = new TimelineMax({paused: true, onComplete:clear}); $('.circle').hover(function() { TweenLite.to($(this), 0.2, {backgroundColor: "#f15a29", ease:Power2.easeOut}); }, function(){ TweenLite.to($(this), 0.2, {backgroundColor: "#232021", ease:Power2.easeOut}); }); function clear() { TweenMax.set('.circles', {clearProps:'backgroundColor'}); } Thanks again.
  5. ainsley_clark

    Tweening back to original value

    Hi Dipscom, Many thanks for your reply and the indication of using clearProps. I have tried setting the navTL to clear props on reverse like so: $('nav').hover(function() { navTL.play(); }, function(){ navTL.set(".circle", {clearProps:"backgroundColor"}); navTL.reverse(); }); This works reversing, but has some unexpected results going back in. You can see the animation here: http://www.ainsleyclark.com/test/index.html with the code I showed above. Thanks once again.
  6. ainsley_clark

    Tweening back to original value

    Hi all, Im creating a navigation bar that pops out from the right hand side, within it are dots (.circle) that's basically a vertical nav. When the user hovers over the navigation bar the dots expand and change their background colour. var navTL = new TimelineMax({paused: true}); navTL .to(".circle", navTime, {scale: 4.2, borderRadius: 3, backgroundColor: "#232021"}) $('nav').hover(function() { navTL.play(); }, function(){ navTL.reverse(); }); Once the user is in the navigation bar, The dots (.circle) background colour should change again upon hover. $('.circle').hover(function() { TweenLite.to($(this), 0.2, {backgroundColor: "#f15a29", ease:Power2.easeOut}); }, function(){ TweenLite.to($(this), 0.2, {backgroundColor: "#232021", ease:Power2.easeOut}); }); It changes, which is fine but when the user closes the navigation bar, the dots always go back to the darker-colour (#232021) instead of their original colour when loaded in the DOM (#958f8f). Many thanks in advance, Ainsley.
  7. ainsley_clark

    A way around not creating a new timline on hover

    Wow, what a delicious bit of code, many thanks Craig!
  8. Hi there, Something fairly basic to ask. I have a timeline, which animates a card: var craftsRolloverTL = new TimelineMax({}); craftsRolloverTL .to(".crafts_box img, .crafts_shadow", 0.5, {y: -10, opacity: 0, ease:Power2.easeInOut}) .to(".crafts_title", 0.7, {y: -260, ease:Power2.easeOut}) .staggerFrom("#crafts li", 0.5, {x: 100, opacity: 0, ease:Sine.easeOut}, 0.2) Each time the user rolls over a card, this timeline is to play, and mouse out, timeline to reverse. $(".crafts_box").hover(function(){ console.log('over'); }, function(){ }); Now - the problem, I don't want to create three separate timelines (there's 3 cards) for each card. I was thinking about creating a function passing in the particular box as a parameter, but this means a timeline is created every time the user hovers over which I know isn't good practice. Is there a workaround? I hope this makes sense. Many thanks.
  9. ainsley_clark

    Button Loading Dot Animation Help (. .. ...)

    Thats exactly what I was looking for Mikel, many thanks.
  10. ainsley_clark

    Button Loading Dot Animation Help (. .. ...)

    Hi all, Im struggling with something small for a button animation. I have a button which has a text value of Submit, when clicked, the text is changed to 'Loading' What I would like to happen is to animate the opacity of three dots fading in (. then .. then ...) using TweenLite but Im struggling to find a way to do it. I was thinking about using TweenMax's staggerTo passing in a array of dots, but no luck. I have attached some code that I have been playing around with, sorry its not very polished. HTML for Button: <button type="submit" value="Submit">Submit</button> Using this timeout I half succeeded but I wasnt able to implement GSAP, and it always went back to Loading. instead of Loading window.setInterval(function() { submit.html(loading += '.'); console.log(submit.html().length); console.log(loading); if (submit.html().length == 10) { loading = 'Loading'; } }, 500); Full Code: $('form.ajax').on('submit', function(e) { var loading = "Loading"; var submit = $('button[type=submit]'); //Disable the submit button to prevent doube submission submit.prop('disabled',true).html(loading); window.setInterval(function() { TweenLite.to("#dots", 0.6, { opacity: 0 }); }, 500); //AJAX Code etc. return false; }); Thanks for your help in advance.
  11. ainsley_clark

    onclick reverse master timeline (specific function)

    Hi @Carl and @mikel Thank you for your swift and detailed replies. I have added my new timelinelites to the master timeline as functions, as in, I have returned the the tls from the function and added to master like so: var master = new TimelineMax({paused: true}) master.add(drawLogo()); master.add(bannerAnimation(), '-=2.8'); master.add(logoRollOver(), '+=1'); master.play(); When doing so I encounter problems though (sorry If I have repeated myself on the forum with the same bit of code): 1) I have a mouseenter function and a mouseleave function in logoRollOver() like so: ///////////////////// Header RollOver Animation ///////////////////// function logoRollOver() { var tl = new TimelineLite({}) .to("#logo", 0.8, {rotation: -90, transformOrigin:"50% 50%", strokeOpacity: 1, ease:Power2.easeOut, yoyoEase:Power2.easeOut}) .to('.blue_stroke, .orange_stroke, .shadow', 0.6, {fillOpacity: 0}, "-=0.8") .to(".letters:nth-child(n+3)", 0.5, {x: 300}, "-=0.8") .to("#I", 0.5, {rotation: -335, x: 70, y: -65, scaleX: 2.6, scaleY: 4.6, transformOrigin:"50% 50%", fillOpacity: 0, strokeOpacity: 0.7}, "-=0.8") .to(clone, 0.5, {x: 400, rotation: 90, transformOrigin:"50% 50%", strokeOpacity: 1, fillOpacity: 1}, "-=0.8") return tl; } //Mouse Enter Play TimeLine $('#home_header').mouseenter(function() { logoRollOver().play(); }); //Mouse Out Reverse TimeLine $('#home_header').mouseleave(function() { logoRollOver().reverse(); }); By returning the timeline from the logoRollOver function, and moving the mouseenter and mouseleave functions out; the function the animation plays, but it doesn't reverse. 2) I also have a learn more button, I would like to reverse the bannerAnimation function when clicked. Again, the reverse doesn't work, it just suddenly hides the text, which I can only presume is the same behaviour. $('#learnmore').click(function() { bannerAnimation().reverse(); }); @Carl I have forked your pen here to explain what I mean: Thanks again for your help. Ainsley.
  12. Hi all, I have a master timeline as follows, where Ive added various functions which all contain TimelineLite's: var master = new TimelineMax({paused: true}) .add(drawLogo) .add(bannerAnimation) .add(logoRollOver, '+=2.8'); I want to reverse the banner animation when a particular button is clicked: $('#learnmore').click(function() { //Reverse the banner animation? //bannerAnimation.reverse(); doesnt work }); Is there a easy way to do this? At the moment I cant target the timeline in the bannerAnimation function. Many thanks in advance :).
  13. ainsley_clark

    isActive() problems with mouseenter

    @OSUblake You sir are a legend! Thanks for your answer. It's cleared everything up.
  14. ainsley_clark

    isActive() problems with mouseenter

    Hi Mikel & PointC, Thanks once again for your replies. @mikel - I didn't know that its more fluid to use SVGs for animation than text, it looks a lot cleaner with your pen; I will have to use them instead. @PointC - I have cleared up the remaining closing div tags and used your code in the link below,. The problem is localised to the logo (even without the text) I have uploaded a youtube video to explain what I mean. logoStuttering Youtube Link Thanks all
  15. ainsley_clark

    isActive() problems with mouseenter

    Thanks once again for your reply. With this pen - if you catch it at the right point (between the outside of the hover area and the inside) at the top, where the A is, it goes back and forth very quickly and isn't smooth. It may take a couple of goes to see it! Thanks for the help :).