ainsley_clark

Members
  • Content Count

    23
  • 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. Hi all, I will be coding something in the near future that basically is a curved line down the page with a ball following it as its scrolled. The line is dashed and will also be filled in on scroll. In essence it will be similar to https://asaro.co.uk/. I wouldn't know where to start. Would anyone have any ideas about how to code this with GSAP? I'm not looking for full blown code, just maybe some pointers on how to achieve this. Many thanks in advance, Ainsley.
  2. ainsley_clark

    Tweening back to original value

    Thanks. A combination of above helped. ☺
  3. 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.
  4. 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
  5. 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.
  6. 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.
  7. 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.
  8. ainsley_clark

    A way around not creating a new timline on hover

    Wow, what a delicious bit of code, many thanks Craig!
  9. 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.
  10. ainsley_clark

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

    Thats exactly what I was looking for Mikel, many thanks.
  11. 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.
  12. 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.
  13. 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 :).
  14. ainsley_clark

    isActive() problems with mouseenter

    @OSUblake You sir are a legend! Thanks for your answer. It's cleared everything up.
  15. 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