Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

ainsley_clark's Achievements


Newbie (1/14)



  1. @PointC Thank you very much for your answer. This is what I'm looking for. Is there a way to clear props for everything within the DOM? I have a vast timeline and it would be quite a long list. Thanks again.
  2. Hi all, I know this has been covered to somewhat within the forums but no answer is giving me a solution to my problem. Im using ScrollMagic and TimelineMax (a lot of timelines) to animate boxes when the user scrolls down the page. My intention is to disable parallax scrolling (the timelines & the scrollmagic controller) when the user resizes below 992 pixels. Upon visiting here: https://github.com/janpaepke/ScrollMagic/issues/15 I was successfully able to disable the parallax, but all my Timelines mostly use .from and upon resize, they preserve the the .from position. What is 'convention' to destroy the timelines and set back to regular position (not .from position) when resizing? I always seem to struggle with this in GSAP! var controller = null; //set initial values for page width and item height var width = $(window).width() //767 is my mobile breakpoint if( width > 992) { initScrollMagic(); } $(window).resize(function(){ //reset values when page size changes //my scroll magic is used on multiple pages, duration depends on item heights width = $(window).width() if( width < 992 ) { //you can just use 'controller' here as it will return true or false, you dont need all the conditionals if (controller) { controller = controller.destroy(true); box2Tween.kill(); //This is where Im having problems box2Tween.invalidate(); //TweenMax.killAll(); } } else if ( width > 992 ) { //same here if ( !controller ) { initScrollMagic() } } }) function initScrollMagic(){ $('body').scrollTop( 0 ); controller = new ScrollMagic.Controller(); //Box 1 Animate Down let box2Tween = new TimelineMax({paused:true}); box2Tween .from(".box--number2", 1.5, {top: -75, ease:Power3.easeInOut}) .to(".box--number3 .box__shadow", 1.5, {scaleX: 0.8, ease:Power3.easeInOut}, "-=1.5") .to(".box--number2 .box__shadow", 1.5, {scaleY: 0, ease:Power3.easeInOut}, "-=1.5"); var scene1 = new ScrollMagic.Scene({ triggerElement: "#box2__animation", offset: -250, duration: $(window).height() }) .setTween(box2Tween.play()) // .addIndicators({name: "1 (duration: 0)"}) .addTo(controller); } Apologies for no codepen, I usually would but its quite complex. Many thanks in advance.
  3. 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.
  4. Thanks. A combination of above helped. ☺
  5. 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.
  6. 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
  7. 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.
  8. 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.
  9. 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.
  10. Wow, what a delicious bit of code, many thanks Craig!
  11. 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.
  12. Thats exactly what I was looking for Mikel, many thanks.
  13. 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.
  14. 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.
  15. 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 :).