redrooster

Hi all, I was wondering if you could help me out - here is my codePen: http://codepen.io/marklawrencedesign/pen/KNgdxL This pen simulates the real-life issue I am having using Ajax, except for demo purposes I am using '.append()' I have been as descriptive as possible in the pen to articulate the specific issue, but I will explain again here: I need to animate an ajax-loaded article on button click 'open' I realise that the loaded content will not be seen by the TL if I declare my variables pointing to these elements on page-load, therefore I am tying the 'master.add(...)' when the button is clicked / ajax content is available in the DOM. The pen works, the loaded content is indeed added to the page, and it animates as expected ONLY on the first play / close. If you click play, and then close a few times in the pen you will notice the animations still plays, but there is a progressively longer gap between each stage of the animations. Is it because on each 'open' click I am again adding to the master, and it is getting 'clogged' up? If so what should I do to clear the 'master.add(...)'? I have done a LOT of googling but I cannot find an answer, and I think I have gone in a big circle of pain. ...awesome product btw (when I can make it play ball ) Thanks in advance if you can help. Also - is there a better // more practical method to my code setup for this in general? It would be awesome for a GSAP Jedi to offer me advice - Im always looking for ways to improve how I approach things.

Thanks PointC - you are a great help!

Hi guys, I was wondering if you could help me with this. A brief overview of what I am trying to achieve: • When user hovers over '.item', I want the tag in the corner to do a bounce animation. • I do not require this animation to reverse on rollout • There are more than one '.item' instances on the page (blog posts) so need to be able to detect the specific instance which it actually hovered on. The problem I am experiencing is if a user hovers in/out very fast - the animation gets stuck. From reading the forums I have tried a few different approaches to this, but cannot seem to figure out how to solve this. - I am also planning on adding more animations on the hover state as well, so ideally need all of these to fire on the '.item''s hover. Here is V1 of what I have tried - hover in and out fast and you will see the ani freeze-up http://codepen.io/marklawrencedesign/pen/ALbLPE Here is V2 of what I have tried using a master timeline, failing miserably http://codepen.io/marklawrencedesign/pen/yaPamY Thanks guys,

alas, indeed gsap is doing what I needed it to, however all of my other code was breaking it!. For anyone who wants to see a working demo of this I have made a pen here Thanks PointC - I am 99.99% sure Ill be back in the forums with another question - in future a pen will be the way to illustrate my question more! Cheers, M

Hi all, I am trying to reverse a timeline that contains a morphSVG transition, but it does not seem to want to return to the 'data-original' coordinates. Here is my code: var master = new TimelineMax({ paused: true }); master.add( swipe() ); //my Animation, morph from one svg to another function swipe() { var tl = new TimelineMax(); tl.set(bgSvgStart, {fill: "rgba(33, 32, 32, 0)"}) .to(bgSvgStart, 0.6, {morphSVG:bgSvgEnd, fill: "rgba(33, 32, 32, 1)", ease: Power2.easeIn}); return tl; } if(openingAni == true) { //play animation master.play(); } else { //play animation in reverse, Not working master.reverse(); } I have tried a few variants of the above code, but cannot seem to get anything working on the reverse. Thanks,

Hi all, I was hoping you could solve this problem I am having, I have read through the forums but cannot seem to find an answer / logical solve to the following: I have a series of functions that each have a part of an overall animation. I am using a master timeline to add each of these two, so that they fire in series. I want to add a delay between when one finishes and the next starts, here is a simplified example of what I need: master.add( showImage()) //I would like to set a delay here until 'fadeImage' starts .add( fadeImage(), "showText") .add( showText(), "showText") function showImage() { var tl = new TimelineMax(); tl.set(bgImage, {opacity: 0, scale: 1.2}); tl.to(bgImage, 2, {opacity: 1, ease: Sine.easeOut}, "sweepIn"); tl.to(bgImage, 1, {scale: 1, ease: Sine.easeOut}, "-=2"); return tl; } function fadeImage() { var tl = new TimelineMax(); tl.to(bgImage, 2, {opacity: 0.1, ease: Sine.easeOut}); return tl; } function showText() { var tl = new TimelineMax(); tl.set(title, {opacity: 0, scale: 1.5}); tl.set(subHead, {opacity: 0, scale: 1.5}); tl.to(title, 2, {opacity: 1, scale:1, ease: Sine.easeOut}, "sweepIn"); tl.to(subHead, 1, {opacity: 1, scale: 1, ease: Sine.easeOut}, "-=2"); return tl; } Thanks,

Hi team, Firstly I just want to say what an awesome product this is - I love it. I was wondering if you could help me out with a problem I am having: I need to change the transform origin of a div I am animating, however when I run the animation, the final value I apply for it is applied immediately - take a look at my code: var master = new TimelineMax(); master.add( sweepIn() ) .add( sweepOut() ) function sweepIn() { var tl = new TimelineMax(); tl.set(sweepAway, {transformOrigin:'left center'}); tl.set([sweepColour,sweepPlain], {scaleX: 0}); tl.to(sweepColour, 2, {scaleX: 1, ease: Sine.easeOut}); tl.to(sweepPlain, 1, {scaleX: 1, ease: Sine.easeOut},"-=1"); return tl; } function sweepOut() { var tl = new TimelineMax(); tl.set(sweepAway, {transformOrigin:'right center'}); tl.to(sweepColour, 2, {scaleX: 0, ease: Sine.easeOut}); tl.to(sweepPlain, 1, {scaleX: 0, ease: Sine.easeOut},"-=1"); return tl; } When the animation runs, it adds "transformOrigin:'right center'" from the beginning, when I need "transformOrigin:'left center'" to be applied first, and then change to 'right center' If this is not clear I can setup a codePen. Thanks, Mark