redrooster

Thanks PointC - perfect. So... have I just read the docs wrong for this by using 'tl'?

Hi all, I am having an issue clearing props as per the codepen attached. On mouseenter, I want to animate each column to 100% width and translate its x position to 0 (so rectangle covers 100% width) On mouseout, I want to reverse the animation to its start state but also remove the translate GSAP injects. When I add: onReverseComplete: function() { tl.set(swatches[i], {clearProps: 'transform'}); }, it is not acting how I expect and does not remove any props, it retains a pixel value for the translate....this means when browser is resized all coluns are not aligned.

Thanks for the examples and video OSUblake - this is really helpful. I appreciate you taking the time to put these together for me. BTW - the circle packing video = mind blown. That is so cool

I added a check to compare the old / new arrays and made them the same length before they go into the GSAP animation. It has made it all a lot more stable. There is a limit to the amount of particles and a balance between the attempts to get a clear position for the next coords for each circle, but I am pretty happy with the result and randomness. I would be interested to see how someone else with canvas / GSAP know-how would approach something similar so that I could maybe learn how to improve in areas of my approach. Thanks https://codepen.io/marklawrencedesign/pen/ExbZpKo

Thanks OSUblake ...yes I am seeing that actually. Below is another revised version where I have managed to reuse my function which I was happy with. As you say though, when the code cannot find a suitable x/y position and 'breaks' out I get a console error as I dont have a matching oldX / newX cord for my animation part further down the road.... the example works to a fashion regardless of this error but when I crank up to say 1000 circles it just breaks down Never mind, I was trying to run with an idea I had but I think it has met its natural conclusion...unless anyone can build upon what I have here of course! Thanks guys https://codepen.io/marklawrencedesign/pen/XWzpaqv

Thanks elegantseagulls. I have taken your advice and worked that into the codepen link here. I have the circles animating now. I am missing the logic that I had in my init() function that checks if the circles will overlap here at the moment though. I can most probably get that to work here again, but just feel I am replicating a lot of the code from that init function here again, dont you think? I was hoping to be a bit more clever by reusing the init function like in my first attempt...but I think I am reaching my understanding of JS in general tbh. https://codepen.io/marklawrencedesign/pen/dyZNWLj Thanks for your input.

Hi, I was hoping someone would be able to help me with the above. I have been trying to figure this one out for quite some time and have hit a wall. I basically have created a function that loops and draws circles to a canvas element that does not allow them to overlap (init() func. in my code). What I would like to do is run that function again, grab new x and y cords and have GSAP animate the circles to these fresh cords (move() func. in my code). Instead of the animation happening the circles simply flash between state 1 & state 2...I have tried all manner of things to get this to work but realise I am missing something fundamental in my understanding of how GSAP plays with canvas here. Any help would be greatly appreciated. Thanks

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