Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by friendlygiraffe

  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
  16. oh I see. I imagine if it were to be used in a Google DoubleClick project, the js library would have to be included in the upload. There is no Google hosted equivalent?
  17. It's for a banner in DoubleClick, which I couldn't find a google hosted link for CustomEase. I noticed you use this URL in your CodePen: //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js?r=2 Is that because it's exclusive for Club GreenSock?
  18. Thanks Jack - Yes Power4.easeInOut is pretty near on close inspection. Almost identical in fact. I have been using that, but I was just looking for a straighter middle part (without constructing a custom version):
  19. Hi, i'm looking to create an ease that would look exactly like the inverse of a SloMo: It starts off slow, speeds up in middle, then slows down. Is there an easy way to switch this? so, instead of the original curve on the left, it would look something more like the curve on the right: Thanks
  20. Thanks Mikel, nearly - I need the text be static Here's a better example of what I mean. Have a look at the red version for what I'm trying to achieve (without having to animated the text):
  21. Thanks Sahil, I couldn't see a solution on that thread that kept the contents (text) static
  22. I'm trying to animate a div (mask) from left to right using width, keeping the text static. I have tried to achieve this using transformOrigin & marginLeft Any other suggestions welcome Thanks
  23. It seems to work when specifying #background_exit as z-index:-1; Would be good to find a more flexible fix though
  24. Thanks, any clue why is the button no longer clickable ?
  25. Might not be specific to GSAP, but: You'll notice when the button is clicked and the function is fired, it seems to remove it's functionally. See in example Thanks