ainsley_clark

Wow, what a delicious bit of code, many thanks Craig!

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.

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

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.

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.

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 :).

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

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

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 :).

Thanks very much for your reply PointC. I have tried to implement hover but still getting lots of stuttering, I have included the codepen below, its not polished yet but you will get the gist. If I use the isActive() function, theres no stuttering, but now, if you mouseover the .test class and mouseout before the animation has finished, the animation wont reverse. Thanks again.

Hi all, I am trying to implement a logo animation turning into a coding symbol with timelinemax. When the user moves into the logo, a few tweens happen: var logotl = new TimelineMax(); logotl .to("#logo", 0.8, {rotation: -90, ease:Power2.easeOut, yoyoEase:Power2.easeOut}) .to("#rest", 0.5, {left: 100}, "-=0.8") .to("#i", 0.5, {rotation: -335, left: 50, scaleX: 1.4, scaleY: 3, color: "#F15A29", top: 10}, "-=0.8") .to("#n", 0.5, {scale: 2.3, left: 100, rotation: 100, }, "-=0.8") When the user moves out of the logo area, a reverse function is called, reversing the animation: $('.test').mouseenter(function() { logotl.play(); }) $('.test').mouseleave(function() { //MouseOut Animation if (!logotl.isActive()) { //Problem Here! logotl.reverse(); } }) I have used the isActive function to find out if the animation is still playing or not because I was experiencing stuttering when the user was going back and forth over the animation. My problem is now: Sometimes the reverse animation isn't played, which I can only assume is due to the isActive returning false when the user isn't over the logo (I hope that makes sense). Many thanks in advance.

Apologies. Misread the answer. Many thanks all!

Hi Mike, Thanks for your reply. Apologies if it isn't clear The question is regarding timing. I would like 3 tweens (.blue_stroke, .orange_stroke and .shadow) all to start at the same time without adding a negative delay to them. Currently I minus 1 second to the tweens so they play at the same time, but I'm wondering if there is a more dynamic way to-do so. Thanks again. Ainsley.

Hi all, Sorry if this has been covered but the links I'm using I cant relate to my code. I have a TimeLineMax set up and wish to animate different items along the timeline, for example below, .blue_stroke, .orange_stroke and .shadow I want to animate at the same time, at the moment Im using an animation delay at the end of the tween, which is sort of defeating the purpose of timelinemax for me. Thanks in advance for your help. $(document).ready(function(){ var timeLine = new TimelineMax(); timeLine.add("start", 2); timeLine .to('#logo', 2, {strokeDashoffset: 0, ease:Power2.easeIn}) .to('.blue_stroke', 1, {fillOpacity: 1}) .to('.orange_stroke', 1, {fillOpacity: 1}, '-=1') .to('.shadow', 1, {opacity: 0.57}, '-=1') .to('#logo', .5, {opacity: 0.5, ease:Power2.easeIn}, '-=.8') //.to('#logo', 0.2, {strokeDashoffset: length}); });

Thats perfect Carl, thank you very much for your help.

Hi all, Very new to GSAP, but it seems like an excellent tool. A very simple question, one which has probably been covered but I cant seem to find it. Im animating a div class that has a name in it (.name). I want some animation to occur when the user rolls over it (scaleup), at the moment I have a mouse out function but would much prefer for the name to expand and then go back to the original size using only a mouse over. Basically I'm trying to rid of the mouseout function so it scales up, then down, without the userof timelineMax. Many thanks in advance. $(document).ready(function(){ $('.name').mouseover(function (e){ TweenMax.to($(this), .6, { scaleX: 1.2, scaleY: 1.2, ease:Elastic.easeOut }); }) $('.name').mouseout(function (e){ TweenMax.to($(this), .6, { scaleX: 1, scaleY: 1, ease:Elastic.easeOut }); }) });