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!