Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

8 Newbie

About kez1304

  • Rank
    Advanced Member
  1. 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.
  2. 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?
  3. 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
  4. 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 notewo
  5. 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.
  6. 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
  7. Yup, so I just tl.invalidate().play(), each time, and I'm golden?
  8. 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.
  9. 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 s
  10. 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 posi
  11. 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.
  12. http://codepen.io/anon/pen/wgGyqO Is a commented and functioning pen for what you're trying to achieve. Hope this helps!
  13. 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 fro
  14. It only seems to be working sporadically for me now with the timeout. Setting it to 10 seems to help a little.
  15. 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. Addin