
MSCAU
Members-
Posts
13 -
Joined
-
Last visited
MSCAU's Achievements
Newbie (1/14)
8
Reputation
-
Yes thanks. I find I can run both of these successfully: tl.to(".div1", SPEED, {borderRadius: "+=10%"}); and tl.to(".div1", SPEED, {borderRadius: "+=10% +=10%"});
-
Thanks to the above discussion, I now have a countdown clock which doesn't pause when switching to a new tab: https://codepen.io/MSCAU/pen/XyXoba
-
Aha, the light bulb has gone off! I had no idea tweens are crystallized at the time of instantiation. Thanks for explaining that, @Dipscom. I like @Greensock's suggestion too which led me to the apposite video on https://greensock.com/docs/TweenMax/invalidate and the solution to the problem: https://codepen.io/MSCAU/pen/oPxEwY
-
Thanks, @Dipscom, that doesn't sound right. The function $('.floater').click(function(e) {...} runs before every animation and already sets the fixed_offset_top value. Having that value change triggered by a window resize event rather than a click doesn't sound likely to make any difference. And as you can see here, it doesn't: Maybe I'm not understanding what you mean by "recreate your timelines".
-
I have a toolbar which can be either at the top or the bottom of the window (position: fixed). I use tlup and tldown tweens to transition between the two positions. I want this to continue working smoothly when the user resizes the browser (eg. by rotating their mobile device - hence the fixTop and fixBottom callbacks). Despite the fact I'm recalculating the pixel distance between the top and bottom of the screen before each pass (via the fixed_offset_top variable), once the window is rotated, it seems as though my animation is preserving some 'memory' of its previous tween target as it doesn't end up in the right place. I've read this topic and applied clearProps:"transform" to some effect, but it's obviously not a complete solution to my problem:
-
Thanks, Sahil! You've been a great help.
- 3 replies
-
- 2
-
-
- timelinemax
- callback
-
(and 1 more)
Tagged with:
-
Hmm. I think it's because at the time I'm setting up the callback for tl4, tl5 hasn't been declared yet and the tl4 callback expects tl5 as a parameter. I'm happy to take suggestions on how best to structure this!
- 3 replies
-
- timelinemax
- callback
-
(and 1 more)
Tagged with:
-
(I am trying to use two separate timelines for open and close animations. I have two tests set up which have the same error.) I pass references to timelines to my callback functions. When I pass them as timeline instances, the callback function reports that they are undefined. I can work around it by passing the names of the timelines as strings but that is clumsy. What am I missing? You'll need to have the console open to see the errors. They also manifest themselves after a few toggle actions as timelines don't get reset properly.
- 3 replies
-
- timelinemax
- callback
-
(and 1 more)
Tagged with:
-
Thanks, this was helpful. I ended up starting my own CodePen question before I found Carl's answer so I'm posting this here in case anyone else needs another reference in future:
-
For (my own) future reference, here's what works, showing that a circle's radius needs to be tweened within the attr property but stroke-width, stroke-opacity and fill-opacity (for example) don't: <circle cx="75" cy="130" r="0" id="wave"/> var tl = new TimelineMax({repeat:-1}); tl.to("#wave", 1, {attr:{r:100}, 'stroke-opacity': 0, 'stroke-width': 5, 'fill-opacity': 0});