Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About SimonWidjaja

  • Rank

Recent Profile Visitors

553 profile views
  1. Thanks. Zach. That is exactly how I ended up. Works like a charm... I just thought there might be a more elegant solution. But it's still pretty straight forward! I can totally live with that.
  2. Hi. Is there a way to get the current step # in onUpdate callback when using ease: 'steps(123)'? I was spending the last hour trying so, but without any luck. I could read out the current backgroundPositionX and use that to recalculate the current step #. But that is not very performant and more a workaround. I bet there is a smarter way to achieve that in GSAP, right?
  3. Thanks Zach for the feedback. I was afraid so... I basically just want the element to scale around its current center (whatever that may be). So let's assume I want to achieve that by getting rid of the transformOrigin in CSS. I would have to alter the matrix transform accordingly, right? Do you have any hint how to do that the right way? .el2 { transform: matrix(0, 1, -1, 0, 300, 100); } That would do the trick. But how can I safely alter the matrix like this so that get to these values even if there are more complex rotations etc involved? Are there any good librari
  4. Hey GSAP enthusiasts, I have a problem with the following scenario: I have two image elements: .el { position: absolute; width: 100px; height: 100px; } .el1 { transform: matrix(1, 0, 0, 1, 100, 100); } .el2 { transform-origin: 0 0; transform: matrix(0, 1, -1, 0, 400, 100); } The second element "el2" has an initial rotation applied and also the transformOrigin set. Now I use gsap to animate both elements like this: gsap.to('.el', { delay: 2, repeat: -1, yoyo: true, transformOrigin: '50% 50%', scale: 2 }); When running in the br
  5. Huh. The last post was based on the non-compressed version from aws. I extracted the minified version from your provided file (gsap-fixed.svg) and now I don't see that error anymore. Very strange. I don't see any reason why the minified one should behave differently. But I am happy, it's working Any idea when this version will be shipped? (I am doing some workshops so it would be nice to share that info as well) Thanks for your amazing support!
  6. Thanks Jack, for providing that version. But it's still not working. Here are some more information: + I am also getting the error in Chrome (Version 73.0.3683.103 (Official Build) (64-bit) and Canary as well) + I am using CDATA wrapper + The source of the error seems to be line 2734: a.style.cssText = "top:1px;opacity:.55;";
  7. Ok thanks. Quick update: I fully reconstructed Chris' version successfully. So 1.16.1 did NOT throw that error. Same with 2.0.0. So the problem only occurs on more recent GSAP versions... One more update: TweenMax v2.0.2 seems to be the most recent one that does NOT throw that error. Everything newer throws it.
  8. yes. e.g. for offline usage. And I think it doesn't even matter. Even if I link to a remote CDN version I will end up with the same error. I think it's not relevant how I embed the runtime but what the context/environment is (in this case a self containing SVG, so no HTML DOM)...
  9. Hi @mikel! It's a general question. Just want to know if embedding GSAP (TweenMax runtime) in a self containing SVG is supported or not. So the only code I have added to my svg is the GSAP code. No animation code yet. So during TweenMax runtime start I get the provided error "Uncaught TypeError: Cannot set property 'cssText' of undefined". I guess it must be caused during the registration process of GSAP on global/document/window level... I would love to provide a sample (even though there is basically nothing in it ) but codepen doesn't support a self containing SVG onl
  10. Hey guys. Can we still embed TweenMax in a self containing SVG file? I took an almost empty SVG file and pasted the TweenMax runtime code into a script tag. But I just get the error: "Uncaught TypeError: Cannot set property 'cssText' of undefined". I did exactly the same with anime.js which worked without any problems. I also saw this older tutorial by Chris Gannon ( ) It worked for him. Is that an older version or am I missing something important? Any help highly appreciated! --Simon
  11. ok thanks! then please consider an additional event callback "onStateChange" as a feature request As interim solution I will proxy/hijack all state changing methods of the timeline object and implement the state change propagation myself. I will let you know if it works...
  12. Hey Carl, thanks for the quick reply. I have already created my own Controller object to proxy the immediate timeline commands (pause, play, seek etc) as you mention. That totally works for my own "controlled" calls. But it's not working for other calls like timeline triggers etc. on dynamic timelines (e.g. with user generated custom actions that call timeline functions directly). So there is no other more robust (lower level) solution? The only solution I see right now would be proxying (overriding) the relevant state changing functions of the TimelineMax object. But that would be pretty
  13. Hi GSAP enthusiasts, I am searching for the best way to propagate state changes on timeline level (e.g. "timeline was paused", "timeline started playing again"). There are event callbacks: "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat". But none of them is working for me... I am looking for something like "onStateChange" that I can listen for, to properly propagate state changes. e.g. tl..eventCallback('onStateChange', function(evt) { if (tl.paused()) { /*...*/ } else { /*...*/ } }) Is there any recommended way to achieve t