Jump to content

friendlygiraffe

Members
  • Content Count

    236
  • Joined

  • Last visited

Community Reputation

11 Newbie

About friendlygiraffe

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. That is exactly how it is supposed to animate, but I was trying to keep the end Tween in one line. The first tween has the luxury of being on one line: tl.staggerFrom(".circle", 1, {x:300,autoAlpha:0}, 0.2); Whereas the end tween require 2 lines: tl.staggerFrom(".circle", 0.5, {y:"-30px", immediateRender:false}, 0.2, "end"); tl.staggerTo(".circle", 0.5, {autoAlpha:0.5}, 0.2, "end"); If this is the correct way of doing it then that's fine, I just thought I might be missing a trick. Thanks!
  2. Thanks, that's closer to what I mean, but here's a better example. https://codepen.io/friendlygiraffe/pen/RdEWXJ I want the animation at the "end" label to retain the alpha as it would if immediateRender was true. is is this possible without changing the last animation to a staggerTo? Thanks again
  3. This is exactly what I wanted to achieve. Sorry for the confusion. I had tried immediateRender:false, but only in the Timeline, not individual tweens Would I have to specify the x value in .set? Just checking there isn't an initialise/reset properties method. I looked into ClearProps but didn't get very far
  4. Hi, I was wondering how I would go about resetting a group of elements before another 'from' command is fired? I don't want the y:"-=20px" tween to be initialized when starting the timeline, and when they are animated from y, I want them to start from the original x. I've tried a .set command but didn't work for what I want.
  5. Yes that works too, I see what you mean now @GreenSock Jack. Thanks
  6. Thanks all, sorry for the delay. I've made another pen to demonstrate what I'm trying to achieve. It's like @GreenSock's pen, it stores the height in a variable on initialization. But I was trying for a method without storing the height as a variable. I'm assuming that this is the only way now. Thanks again! https://codepen.io/friendlygiraffe/pen/xBpKWN
  7. Thanks, but unfortunately the heights aren't consistent, they're expanded to the content within them. And yes, scaleY stretches the content within. Appreciate the reply
  8. Apologies if I haven't explained myself. So there will be several containers which need to remain hidden until an animation is triggered by a mouseclick I could make every div a from timeline and set it to paused:true, I just wondered if there was a simpler way
  9. No because I want to set the height of the div to 0 before I animate it, thanks
  10. I want to set the height of a div to 0%, then animate the height to 100% of it's original size. This works with px, but since I don't know the exact height in px I'm using percent instead. I could get the height using .clientHeight; and store it in a variable when initialising, but I wondered if there was an easier way. Thanks
  11. Hi, is it possible to replay a child timeline. See the Codepen URL for what I mean. It resets it, but doesn't play. Thanks
  12. Ah, add it afterwards. Nice and simple, thanks
  13. Hi, without using absolute values, is it possible to add a Child Timeline to another without affecting the timings of the Parent Timeline? For example in the TL I want the red circle and blue circle to start at the same time Thanks
  14. Thanks all. This worked for me
  15. Hi, I'm having to use an SVG mask (so it works on Explorer) I wondered how I would animate the containing image, without moving the mask? See demo