Dipscom

Hi gabriele, Could you set a little demo up that showcases the issue you are having? It is very hard to troubleshoot code blind. Thanks!

Hi ARAS, Thanks for the Pen, it helps and does make a bit more sense now. The bad news is that VisJS is not drawing an SVG shape, at least not in the example you have provided. It's drawing shapes in canvas and from a quick glance VisJS does not offer ways to animate the actual connections between the nodes. I'm afraid this is more of a question to the VisJS forums rather than the GSAP, as I said, I have no experience with it and can't really dedicate the time to learn that framework to see if I can come up with a way to do it. If you can find out how the edges are being drawn, we surely can make GSAP animate the values. But so far, from what I can see, the edges are on a on/off value only. No option to animate the length of it.

Hi ARAS, Welcome to the forum! I have zero experience with VisJS (never heard of it but again, there are so many JS libraries nowadays that no one will know them all - it will be the next Pokemon expansion set by the looks of it "Pokemon JS, Gotta Learn them All"). Erm... Anyways.... It is possible to integrate GSAP with pretty much anything that's a JavaScript object and tween its values. I can't give you any snippets or show any examples that are related to VisJS, maybe if you can set a little reduced case scenario other people can jump in with their thoughts. I had a look at the link you sent but I am a bit confused as the link takes me to a visualisation that already is animating. Plus, it's a canvas element, not a SVG one so, DrawSVG won't be able to help you much unless your canvas is referencing SVG elements. Ideally is best to provide a demo in CodePen or JSFiddle or some other online editor so we can focus on just the relevant code in your case, there's the whole rest of the site that makes it take a lot longer to identify what is relevant and what is not.

Hey RealMakAttack, I'm not near my computer but one quick thing you can do is have the images set to have their visibility:"hidden" until GSAP kicks in. You can do the positioning first, fading/toggling the autoAlpha back to 1 after. That way, you'll have access to the image's width and height but no one will see the jump.

By no means take my answer for the official one I'd say yes because GSAP uses RaF and defaults to setTimeOut when not available (or told to use). http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ticker/ I'd say it's as accurate as one might hope it to be. Mr. Greensock here is very keen on performance and he makes sure GSAP as as little "fat" on as possible. Once again, it will boil down to what is your intended use. If you are going to be using it for cognitive response of the brain, I'd set a couple of tests to check the accuracy versus the technique your chum uses.

Hi andytwoods, As with everything in the world, the answer will probably be: it depends. Firstly, I'm not speaking for GSAP in any official capacity - just as an individual. Looking at your links I see they are vey technical and scientific - Not a criticism, just laying out what I see your point of view being. I have a question: Are you asking how accurate the tick is in terms of scientifically accurate to a real-world tick (1/60 of a second)? Going back to the "it depends": It depends on what application you are targeting your animation. For game development and online interaction the tick is extremely accurate. For some physics it's also quite accurate. For calculations on how atoms would move in the first second of the Big Bang, it would probably be not so accurate. The biggest thing to consider here is the browser, because it is the browser, plus the machine that's running the browser, that will dictate how many ticks will happen in a given second. Depending on the circumstances the browser will throttle RaF down to conserve energy, sometimes it will drop a tick because it missed the 16 milliseconds window to render all it needed. The RaF will do everything in its power to guarantee a smooth animation playback but it will still be constrained by the browser. I do believe GSAP is extremely performant and will stick to the ticks so, every calculation will be performed, but whether the browser is going to render the image on every tick will be a completely different story as the rendering is not controlled by GSAP. If you are doing scientific simulations, you will need to isolate all variables - as you probably know - before you can start considering if the visual elements are being displayed on the screen. The hardware it is running on, what software it is running on, then the amount of pixels/points you are trying to render on the screen. My personal position would be: you will have a guaranteed rendering of all pixels you require if you have a combination and control of a hardware/software that is powerful enough to handle it. If you are trying to guarantee the image is going to render flawlessly out on the wild west of the internet, I am afraid there is no guarantee that you will not be losing a frame here or there or a dozen.

Hi Steven Sanborn, That's an interesting question. It's beyond my current knowledge of the engine. I have asked others that know more about the ins and outs of it to come by and shed some knowledge. Hopefully it won't be too long (timezones, I'm sure you can understand) until someone's awake to see it.

Hi kwing, It's pretty much what you and cekvenich said: two images, each controlled by a different tween. If you hit any difficulties, get a little demo and we will help troubleshoot it.

Livin' an learnin'

Looks like this le-mugs website is the hottest thing in town at the moment. You're the second person this week trying to replicate their effect. http://greensock.com/forums/topic/15509-create-one-page-site/ The theory behind the effect is that you need to calculate the size of the window, distance between where the window is to where it needs to go and how long you need it to take. You need to trigger that calculation on the window.scroll event but at the same time throttle the amount of times this function is going to get called to stop the page becoming too slow.

Hi one2gov, I see an issue when cloning after moving the element, not when scaling. I have a little suspicion that there might be some conflict going on there but need to look into what might be. Others might also have encountered this situation and might offer some help. For now, I'll ask you to hang on a bit. Thanks.

I'd guess it would depend on how many items you are going to have on that array and how many times you want to update that because, you could create a function to create an array based on your initial one plus whatever else you want to add to it. Then, you'd feed the resulting array from the function into your tween.

Hi friendlygiraffe, Yes, it should work. I just copied your text and pasted in your example and it worked fine. GSAP will not, however, see that you have an array inside the array and iterate the elements inside the inner array automatically, like you have in the example Pen.

No cheese to Carl or Greensock.

Isn't french cheese illegal in America?

Yeah but it's not that obvious at first glance. Here's one way you can reach it. function log(e) { console.log(e._targets[0].id) } var tl = new TimelineMax(); tl.to('#me', 1, {x:100, onComplete:log, onCompleteParams:["{self}"]}) .to('#him', 1, {x:200, onComplete:log, onCompleteParams:["{self}"]}); http://codepen.io/dipscom/pen/yVpgKW/?editors=1111

Sorted!

Listen to the man... That's what I'd do.

That will only trigger once all tweens have completed. The normal onComplete will be fired for every element on the array. So, if you have five "things" the onComplete will fire five times, the onCompleteAll will fire just once. The docs go over such things in much more detail: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/

That does not sound fun Oliver15Years. You can write you SVG tags with opening and closing tags. <rect id = 'b1' x = 99 y = 9 width = 97 height = 94 fill = 'rgb( 229, 229, 229 )' ></rect> <path id = 'b4' transform ='scale(.1)' layout = '141 24 13 8' fill = 'rgb( 210, 210, 210 )' d = 'm1415,242h120v25c0,28 -22,50 -50,50h-20c-28,0 -50,-22 -50,-50v-25z' ></path> Obviously it won't help with the <image> being converted into <img> but it should be one less thing for them to break for you.

Thank you. It does make a lot easier to see what is that you are after and what is going wrong. In your case, you are not telling the timeline to wait until whatever is happening in the function before continuing. Again, there are several ways to achieve this, one of them is the bellow. http://codepen.io/dipscom/pen/yVPqgr?editors=0010 It makes use of the callback of the .staggerFrom() method.

There could be several issues Emily, do you think you could make a little demo to show what is it that you are trying to accomplish? It will be easier to spot any issues if we can see it in context. (Carl, go away, I can see that you're looking at this topic at the same time as myself)

Hi Mily31, Welcome to the forums! There are a few ways to accomplish what you are looking for. The simplest one would be a .call() at the point you want your function to be triggered. t1.to(TolosaPlanet,1, {autoAlpha:1, scale:15, ease: Bounce.easeOut, y:0 }) .to(orangeArrow, 0.5, {autoAlpha:1, scale:1.3,ease: Bounce.easeOut, y: 0}) .call(initWriteMachine, [divID,charList]) .to(blabla); From the docs: https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/call/

Hey Liam, You'll need to recreate the Tween if you want new values each time. http://codepen.io/dipscom/pen/YpEEVx?editors=1111

Surely that's something you can push back to them. If you are creating new formats they must provide working examples. How about picking another format that has a video and a template and cannibalizing some of it to use in this new format?