kez1304

Can either of you explain what's going on in: http://codepen.io/anon/pen/oBZLdW?editors=0010 Mouse over and off of the red box twice, and you'll see what I mean.

Thanks a lot blake, That transform was just what my vector graphic program threw out when I exported to SVG... Am to assume that I'll always have to look out for that when exporting SVG's? Because that could become a headache with larger infographics when I'm looking at animating them. It's also going to result in more work when ensuring that my no-js SVG's still look right. Is there nothing that can be done? Maybe GSAP could convert the transform attribute to a style on first contact or something?

Hi guys, Weird one here... (that's not a statement about myself btw) If you look at my pen, I have an issue where, when you hover over the red box, the SVG rectangle rotates slightly. That's fine. When you mouse off of the red square though, the animation ends when the timeline has completed (more on that in a minute), and the SVG snaps back to a completely unrotated version of itself. After looking through inspector, I realised that GSAP was removing the SVG transform attribute, and replacing it with it's css matrix. If I add a set to the end of the timeline (which shouldn't be necessary anyway), to maintain the -45 degree rotation, it is ignored. So that's issue: #1. Right, so I thought, "the timeline displays the rotation correctly, so rather than pausing the timeline with .pause(), I can use something like, .pause(0.0001). Not ideal, but it should work.". If you switch lines: tl.pause(); // tl.pause(0.0001); You'll see that after the first mouse off event, all is great the rectangle sticks in its rotated state. Hurrah! However, if you mouseover it a second time, the timeline plays once more, and then stops... Or so it seems. If you click the Is Timeline Active button, you'll see that as far as GSAP is concerned, the timeline is still running, and is just running endlessly, without any repetition. And that's issue: #2. To be honest, I don't really care which one of these issues I can get solved, although issue #2 seems like a bug in the GSAP Timeline object itself (being active, without being active). Any idea on how to get around either of these issues? NOTE: This is a hugely simplified example of what I'm doing at the moment, so I'd really like to avoid changing any part of the SVG markup itself, if at all possible. Thanks guys!

Hi Jack, Thanks a ton for explaining that! Makes a lot of sense now. So JS assigns the value to the object key, and will only remember a formulae if it's wrapped inside a function? I'm fairly new to JS objects (but was originally a Java developer, so not new to the OO/dot-notation concept), so it seems I still have a lot to learn. I'm now wondering if I could extend the GSAP TimelineLite object to have a .live() method, that will wrap all object value's in a return function, so that I don't need to think about this in the future... Although I'm wondering if there'll be a noteworthy performance impact changing something like: tl .to($('.someClass'), 1, { x: 2 + 5 }); Into: tl. to($('.someClass'), 1, { x: function() { return 2 + 5; } }); What do you reckon? Implementing something along the lines of what's described in this super short article: https://davidwalsh.name/javascript-functions Are there any negative points/things to consider if I'm planning on wrapping ALL object value assignments in a return function? Oh, and thanks again for the assistance Jack.

The trick here is to increase the scale of the contents to compensate the decrease in scale of the parent. Something like: http://codepen.io/anon/pen/PWGzzV?editors=0010 Although, it's not perfect (the easing is a bit off), but it should give you somewhere to go from. Also note that text wrapping won't work correctly because you're stretching it, as opposed to adjusting the width.

See the attached code pen. On initialisation, the height and width variables will get updated to reflect the size of the box. Click play 1, and the box will increase in size to double the size of the width variable. It'll update the variable after the animation completes. Click play 2, and the box will decrease in size by halving the width variable. Again, it'll update the variable after the animation completes. Play 1 works as expected. Play 2 halves the original variable width. I get that that is expected behaviour, as when the timeline is initialised, it caches the values in the timeline object, but I thought invalidating the timeline was supposed to recheck the values that the variable references? Am I not understanding what invalidate() does correctly? And if so, is there a way to force the timeline to use the update variable value? I'd rather avoid creating the timeline within a function if I can as I'd like to keep things clean, and I'd also really like to understand what invalidate does exactly. Many thanks!

Yup, so I just tl.invalidate().play(), each time, and I'm golden?

You can use the invalidate() method to clear any cached values from the tween/timeline, and I've found that it works particularly well if you assign a function to the value. Have a look at: http://codepen.io/anon/pen/zNqeGv To see what I mean. It's not exactly a solution to what you're after, but it might point you in the right direction. Resize the window/frame, and see what happens with the pausing/playing/restarting.

Eureka! I realise now that it was a fault in my approach to this issue... I was passing a function that calculated the theoretical height of the text containing div, INTO the GSAP animation itself. I can only assume that because GSAP couldn't identify what the value was in advance (and I was invalidating the timeline), that it could only determine the value as it was executing... BECAUSE OF THAT, if that particular tween animation would result in there not being enough space between the current viewport and the bottom of the window, GSAP (or maybe the browser itself..?) would force the screen position to jump up, to accommodate for the newly learnt value. Having moved the function call OUT OF THE value for the paddingBottom, and instead set a variable to its value (that also updates on resize), and using that new variable as the value for paddingBottom... All is well. I guess GSAP doesn't get interrupted whilst it's doing its thing, and knows exactly what it's animating to from the get go. Moral of the story is not to call functions to get tween values, or are there times when that's perfectly acceptable and advisable? var tl = new TimelineMax(); tl. to(element, 1, { x: someFunction }); function someFunction() { return (33 + 66); } For example?

Hi Dipscom, That codepen is purely a simple example to demonstrate the problem. The reason for switching to absolute is that; I have a div that's left floated, and another div that sits to the right of it, with some dynamic text in it... I need to find the height of the text containing div when it's a true block level element. I thought the best way to get around this was to have a function, that quickly switches the text containing div to an absolutely positioned div, it would become 100% of the page width, I can grab the height of the text containing div, and then remove the position style. Is there a better way to grab that value? Without reflowing the page? Or is there anything I can do to get around this issue? UPDATE: Here's a codepen that better demonstrates what I'm trying to achieve, and the problem... http://codepen.io/anon/pen/JEXaxG?editors=0010

Can you point to an example of what you want the finished product to look like? I'm thinking there's a much simpler way to achieve this effect, but I'm not 100% sure of the effect you're after. Killing timelines and/or tweens, and re-instantiating them, and then seeking to the point they were at previously is super messy, and just going to give you headaches until you reach for your Luger and blow your brains out.

http://codepen.io/anon/pen/wgGyqO Is a commented and functioning pen for what you're trying to achieve. Hope this helps!

var element = document.getElementById("pilot"); var tl = new TimelineMax(); tl.fromTo(element, 0.1, { x:"+=20" }, { x:"-=20", yoyo:true, repeat:10 }) .repeatDelay(2) .repeat(-1); This solution switches your TweenMax for TimelineMax. I'm not sure if there's a way to do it purely with TweenMax, as it requires adding a repeat onto the tween itself (the 10, for the shaking), and then a repeat for the entire tween animation (the -1, infinite repeat), and finally a repeat delay onto the entire tween's infinite repeat (the 2, for a 2 second delay. I also switched the two tweens from two to's, to a fromTo tween, as it just made more sense to do so in this instance. Oh, and I added overflow: hidden to your '.wrapper' class in your CSS, to get rid of the annoying scrollbar appearing at the bottom of the page, but that's just me.

It only seems to be working sporadically for me now with the timeout. Setting it to 10 seems to help a little.

Hi guys, Been struggling with this for a while now, and not really sure what can be done about it. If you look at my codepen, when the animation is played, the green box stretches out to become really long. If you then scroll down the page to click the reverse button, the page will jump up to a random point in the page. After a lot of googling, I found a solution, which is commented out in the Javascript section of the codepen. If you comment out the line that's enabled, and uncomment the three lines for the working solution, then it should behave as I want it to. Adding a timeout of 1 millisecond will apparently fix the issue, which I believe is related to the page repainting too quickly, but I'm not 100% sure. This is on Windows 7 - Google Chrome, by the way. Not sure if the issue exists on other browsers yet. Has anyone else encountered this problem before? If so, how did you overcome it? setting a timeout seems a bit messy and hack-ish... I realise that this isn't strictly a GSAP problem, but figure that the pro's here will likely be well educated to shed some light on this anomaly. The real problem I'm having is related to changing a relatively positioned element into an absolutely positioned one, and I'm not sure how I'd get the timeout in to a set, within a TimelineMax, so any advice on that front would be most welcome too. Many thanks!

Thanks a lot for all the insight guys, and sorry for the delay in replying! I think as a general rule, I'll stick to using GSAP Tweens for all of my animation based styles, and use CSS for initial settings, and other non-animation related stuff. It certainly saves quite a few headaches trying to stitch JS and CSS together across two or more files! Also, massive thank you to blake for all your examples. Great stuff!

Hi Jonathan, Thanks for your feedback on the topic! I'm curious as to the difference between onComplete, and using a set. I'd of thought that onComplete implements set itself, and that using onComplete would mess with a timeline being reversed, whereas a set at the beginning and the end would always ensure that it's state is correct in both of these circumstances. Are there times when using a set method to instantiate a clearProps attribute doesn't work properly? I thought I'd give the example codepen I did to demonstrate how sometimes a timeline needs to be cleared at the beginning and end, and how a class addition/subtraction could be used, and whether it was generally considered better to or not. Again, baring the BEM design philosophies in mind. I appreciate that with a more general animation (a banner ad, intro video, etc.), it's not really important, and inline's are fine, but when it comes to elements that are core parts of the page flow, that the lines of best practice can become blurred. In something like an angular project, where most elements are related to each other, I would assume that having lots of inline styles could get rather messy, rather quickly. Another example would be: There is a button that has two states, enabled and disabled, represented by two classes, example__button_enabled, and example__button_disabled, respectively. example__button_enabled has a blue background. example__button_disabled has a red background. When some required fields are filled out correctly, the example__button would use GSAP to transition from red to blue. Whilst enabled, the button functions as you'd expect, posting some PHP or something similar. When disabled however, if the user clicks the button, it shakes violently, indicating that it is not yet ready to be submitted. If there is no class applied to the button at the end of the transition from red to blue, then there is nothing maintainable to check for to see whether or not the animation to violently shake the button should be played... In that example, the most logical solution would be to transition from one className to the other, as another function relies on there being something to check against; in this case, example__button_disabled existing on the element. Is it generally best to avoid getting classes involved, unless there are likely to be numerous animations taking place on a single element under different circumstances? Is that the take home of this?

I knocked up a quick CodePen to demonstrate the difference I'm talking about.

Not specifically ReactJS, or Angular, or anything like that. I'm thinking more about; if I'm working on a large project, that needs to be maintained by a half-dozen people, digging into JS files to find animations isn't necessarily the most efficient way of handling things. I also imagine that if you have Class A and Class B, and you want to transition from one of these states to the other, through the eyes of a new-comer to an already established project, it's much easier, and seems a lot more coherent to just see that box_blue is changing into box_red, as opposed to an RGB value magically changing from one to the other. I also find that because it's inline it seems less permanent, almost like it's not supposed to be there, or that it's just a temporary change to the element, which it might not be. I'm curious if most people remove the inline styles at the end of an animation, and replace them with a solid class, that keeps the same changes the animation has created... Thinking about it though, that is creating twice as much work in terms of maintenance.

Hi guys, I was just looking for a bit of advice/a bit of a discussion about the pro's and con's, and the way you guys handle classes when it comes to animating essential page elements. For example, if you're using GSAP to have a modal window speed in from the left, a full-screen overlay grey's out the background. At this point the first animation ends, as the user needs to do something (input an e-mail address, for example). After which the modal window zooms off, and the full-screen overlay is removed, and the page is usable again, which is a separate animation. In this example there were three states; the Initial State, the Interactive State, and the End State (I just made those up), and at each of these points, different classes need to be applied to each of the elements involved (the background overlay, the modal box, etc.). Baring that in mind, is it best to animate the classes, using ClassName, or to use the standard inline-styles, and maybe apply the new classes/remove old ones at the end of the animation with a set/onComplete? Are there sometimes benefits to doing one over the other? This is more a question about best-practice I guess, rather than a specific use-case. I've just been learning about BEM recently, and it's got me thinking a lot about how to most efficiently and develop maintainable projects. I'd really appreciate any opinions/takes on this matter, as I really love both the BEM style of development as well as the GSAP suite. Thanks guys.

Ok. I see my problem now, I'm invalidate()-ing the timeline before I reverse it, which is destroying the link I assume... Is there any way around this?

Hi guys, Just quickly (I haven't got time atm to slap an example codepen together), is there a way to toggle the CSS className attribute? I have an object that's being manipulated a lot, and one of the tweens is removing a class from an element, and animating it's new position accordingly. className: '-=responsive-example_small' This works fine, until I reverse the timeline... At which point the class isn't re-added to object, and obviously, no animation occurs, resulting in a broken reverse animation. I know I can remove the "-=", but that overwrites all the classes on the element in question as well, which is again, undesirable and dangerous to maintain. Is there a toggle for ClassName that I simply haven't come across before? Much like JQuery's $(e).toggleClass('someClass')? If not, is it a possibility for the future? Thanks a lot!

D'oh!! It occurs to me now, that onRepeat will have to be called on the TimelineMax itself. The Tween in question isn't aware that it's being reversed. Sorry guys! Blonde moment!

Hi guys, Just scratching my head at this. As you can see in my codepen with your console open, all the on[EVENT]s fire, except onRepeat. I'm in need of having an event fire at the end of the repeatDelay on the timeline, but as it stands, I can't find one. Does anyone have any idea how I can find out (and call a function) at the exact moment the text starts to disappear again? Many thanks! EDIT: Just a note, removing the yoyo and repeatDelay, still means that the onRepeat event doesn't fire... am I missing something obvious here?

Hi Jack, Thanks a lot for your solution. It works great! One question though... Where can I find more info about the time variable? {time:tween.duration() / 5} All the documentation on the site is great, but I can't seem to find all the supported variables available anywhere in them. I can find constructors, methods, arguments, return types, etc... But just about every Tween object takes a var object as an argument, but when I follow the var link, I just get a tiny bit of information describing what it is. No where can I find a list of what's actually available... http://greensock.com/docs/#/HTML5/GSAP/Core/Animation/vars/ Is where I always end up. Can you point me in the right direction? Thanks once again!