OSUblake

Hi andyr There are several issues with your example. First, you are not adding the tween to your timeline. tl.add(tween); // Should be vm.tl.add(vm.tween); Second, you are trying to invalidate and change the vars on your timeline. vm.tl.vars.css.top = 200; // Should be vm.tween.css.top = 200; Third, you should probably handle animation in an animation module and not the controller. The controller is a view model, so you really only need 1 line of code. vm.show = false; http://codepen.io/osublake/pen/pJJZdj

Hey Frim, I struggled with this issue for a long time, and finally realized that the className tween is working correctly, my assumptions were wrong. Please read this thread to find out more. http://greensock.com/forums/topic/11374-override-properties-when-tweening-classname/?p=46364 The demo I made in that thread uses the CSSRulePlugin to get the CSS values, which I then extend onto my target. http://codepen.io/osublake/pen/gbjqbE And if you're using media queries, you should check out the JavaScript way to do it. http://codepen.io/osublake/pen/vExQEy

It's funny that you brought up ES6, because that is what my demo uses. No need to wait around for the browsers to catch up, you can start using most of the features today. Like I mentioned a couple of days ago, I'm a huge fan of TypeScript, which is basically ActionScript with a little ES6 and C# thrown in. Traceur is another compiler worth checking out. Believe it or not, but they are already started to test out ES7 features. And Babel.io is a compiler that is starting to become pretty popular, although I haven't tested it out yet. I don't share on GitHub… and not because I don't want to, or I'm against it, I just haven't gotten around to it. I have a lot of stuff that I want to put out there and share, but I keep getting sidetracked with other projects. I adapted your demo to use some DOM based classes I've been working on. It starts out with a base Actor class, which you can easily extend to create more complicated classes like a stage, scene manager, and even extend GSAP classes like Draggable. I only made a stage, text, and button class for this demo, but you can see how easy they are to create once you have the base class in place. To start using an actor, just new one up. You can pass in some DOM/GSAP related properties here, like where to append the actor, the element's id, the element's tag, and some styling properies. There is also a style property that you can use to pass in styles that might not be a property of the class. If you define the same property in the style and config object, it will use the config's values. In the following code, the background color will be green…. // The background will be green var actor = new Actor({ background: "green", style: { background: "red" } }); The reason for this is because those properties are actually getters/setters. If you want to create additional getters/setters, pass in a list of names to the styleProps property. // Define and set during instantiation var actor = new Actor({ scaleX: 1.2, styleProps: "scaleX,scaleY" }); // Define and set later on var actor = new Actor() .createStyleProps("scaleX", "scaleY"); actor.scaleX = 1.2; Configuring an actor should be pretty straightforward. var actor = new Actor() .addTo(myParent) .addChildren(child1, child2) .set({ opacity: 0.5, zIndex: 30 }) .set("padding", 6) .setPosition(200, 100) .setSize(50, 100); I didn't focus too much on this animation in this demo, but it's in there. All actors have a timeline that you can use just like a normal GSAP timeline. var actor = new Actor() .set({ width: 50, height: 30 }) .to(1, { width: 500, height: 300 }, "start") .to(1, { x: 200, y: 100 }, "start+=0.25"); http://codepen.io/osublake/pen/zGGpoa?editors=001

I know what you mean. Ever since I discovered GSAP, I've been messing around with different ways to replace jQuery with a custom solution. Let me simplify some of the code I've been working on, and I'll post here later. Some quick questions... Are you only using the text plugin to change the text, or are you animating it too? And is there a reason you didn't use var in your demo when creating your variables? Just wondering if you knew the way you did it is creating global variables, which can be bad.

Good point. I experienced the same issue. If opacity is causing problems, and depending on your content, sometimes it might be better to use a png instead. You can still animate opacity with a png by using the Stepped Ease with a sprite sheet.

Gotcha. I've been working on some GSAP based classes, but they go well beyond styling. I modeled them after some HTML5 canvas libraries, so you can do stuff like create, style, position, animate, etc elements from the same class. Are you looking to do something like that?

What are you having a problem with, aligning it?

Now would be a good time to cast your vote http://greensock.com/forums/topic/11578-offset-draggable-bounds/?p=47189

Yeah, I understood that you were looking for other templates, but I brought up TypeScript because you mentioned AS3. I was also thinking that TypeScript could help you fill out some of the special properties like autoAlpha, scaleX, scaleY, etc. Even if you are using plain old JavaScript, WebStorm can still pick up those properties. Check out the pic. If you were to use TypeScript, WebStorm can infer what type of GSAP object you are using, so pressing dot will bring up all the methods and properties related to that object. This makes using a template redundant in a lot of cases. The only downside to this approach is that you can't provide a default value.

Not sure why this would be useful, but assuming you scaled your element to something like 100x30, you could do something like finding the min scaleX/Y and transform it that way. http://codepen.io/osublake/pen/4c8201eaec22aa0290796973d1092684

I love using live templates with WebStorm and ReSharper for Visual Studio, although I really don't have any GSAP related ones to share. However, creating custom templates is pretty easy and they might be easier to remember if you make them yourself. My advise for creating a template is to make the shortcut as small and mnemonic sounding as possible. For example, to create a named function I use f + [tab] to generate. function $NAME$($PARAMS$) { $END$ } If you're looking for AS3 like templating, I would recommend checking out TypeScript, which offers a syntax similar to ActionScript, and it will give you the code completion you are looking for. TypeScript is currently being used by some major players like Microsoft, Google, and Facebook, although GSAP support is kind of limited at the moment... but I'm working on it

Good stuff!!! What about taking it one step further and making the timeline progress bar draggable?

Hi chrisalexander55 My sortable demo uses a very simple layout engine, but it could easily be modified to handle what you are trying to do. Of course this all depends on your JavaScript skills. I've come up with an algorithm to handle this in my head, but have yet to put it into code. Sorry, my to-do list is a little backed up at the moment, so I don't have a solid solution for you The hardest part of sorting elements with different widths and heights is how to deal with filling holes (voids, empty space, whatever you want to call it). If you use mutli-dimensional arrays, it's easy to find and fill holes, but that might come with a speed penalty because manipulating arrays can be slow. Isotope does an excellent job of sorting, but it also uses a complicated bin packing algorithm to achieve this. The code that @violacase links to is only a fraction of the code involved with Packery. You will probably have a hard time getting GSAP to play nicely with it because of how many moving parts are involved with getting Isotope to work. I think you can achieve the same results with a much smaller footprint by using GSAP and a little bit of custom code. jQuery Nested does a good job of sorting, and I don't think it would be too hard to adapt its layout engine to work with my demo. Demo: http://suprb.com/apps/nested/ Source: https://github.com/suprb/Nested jQuery Gridly is another library that might be pretty easy to port over to work with GSAP, although it doesn't handle filling holes as well as jQuery Nested. Demo: http://ksylvest.github.io/jquery-gridly/ Source: https://github.com/ksylvest/jquery-gridly If filling holes isn't an issue, the grid list used in the Angular Material library would be very easy to adapt. Demo: https://material.angularjs.org/#/demo/material.components.gridList Source: https://github.com/angular/material/blob/master/src/components/gridList/gridList.js (starts at around line 573) If you need help understanding any of my code, just let me know, and I can walk you through it.

Yeah, I see a lot of the problems now. The hit test is working fine, but in your code you're getting the clones and the letters mixed up in what action you want to happen. The last example I made would probably solve most of these problems, but that would require you to redo a bunch of stuff. Probably not something you want to do, but since I helped paint you into this corner, I will walk you through it. I'm going to be super busy this week, but I'll try to help you out as much as possible over the next couple of days.

There is a private messaging system built into these forums, but it's all good. No harm done. Help me out real quick, where does #6 happen in your code?

Diaco's solution is probably the easiest way to do this, but if you are keeping a reference to your config object, you can change the function in a way similar to what you originally asked. http://codepen.io/osublake/pen/4c4f65be8f06aa026439c7da2bffa735

Lol. Let me look at it for a minute. But I think I've run across this problem before, which is related to using jQuery objects for hit tests. EDIT: I deleted the post since you change it.

Here's an example using TweenLite http://www.typescriptlang.org/Playground#src=type%20Target%20%3D%20Object%7CObject%5B%5D%3B%0A%0Ainterface%20CSSPlugin%20%7B%0A%09x%3F%3A%20number%7Cstring%3B%0A%09y%3F%3A%20number%7Cstring%3B%0A%09scaleX%3F%3A%20number%7Cstring%3B%0A%09scaleY%3F%3A%20number%7Cstring%3B%0A%09%2F%2F%20more...%0A%7D%0A%0Ainterface%20TweenLiteVars%20extends%20CSSPlugin%20%7B%0A%09delay%3F%3A%20number%3B%0A%09paused%3F%3A%20boolean%3B%0A%09immediateRender%3F%3A%20boolean%3B%0A%09%2F%2F%20more...%0A%7D%0A%0Adeclare%20class%20TweenLite%20%7B%0A%09%0A%09static%20defaultOverwrite%3A%20string%3B%0A%09%0A%09data%3A%20any%3B%0A%09target%3A%20Object%7CObject%5B%5D%3B%09%0A%09%0A%09constructor(target%3A%20Target%2C%20duration%3A%20number%2C%20vars%3A%20TweenLiteVars)%3B%0A%09%0A%09static%20to(target%3A%20Target%2C%20duration%3A%20number%2C%20vars%3A%20TweenLiteVars)%3A%20TweenLite%3B%0A%09%0A%20%20%20%20time()%3A%20number%3B%0A%20%20%20%20time(value%3A%20number%2C%20suppressEvents%3F%3A%20boolean)%3A%20TweenLite%3B%20%20%20%20%0A%7D%0A%0A%2F%2F%20SOME%20SIMPLE%20TESTS...%0Avar%20element%20%3D%20document.getElementById(%22foo%22)%3B%0A%0A%2F%2F%20Good%0Avar%20tween1%20%3D%20TweenLite.to(element%2C%201%2C%20%7B%20x%3A%20200%2C%20paused%3A%20false%20%7D)%3B%0Avar%20time%20%3D%20tween1.time()%20%2B%202%3B%0Atween1.time(0.5%2C%20false)%3B%0A%0A%2F%2F%20Create%20some%20errors%0Avar%20tween2%20%3D%20TweenLite.to(element%2C%20%221%22%2C%20%7B%20x%3A%20200%20%7D)%3B%0Avar%20tween3%20%3D%20TweenLite.to(element%2C%201%2C%20%7B%20x%3A%20false%20%7D)%3B%0Avar%20tween4%20%3D%20TweenLite.to(element%2C%201%2C%20%7B%20paused%3A%20%22false%22%20%7D)%3B%0Avar%20length%20%3D%20tween1.time().length%3B%0A

My example snaps to dynamic values. That was the main reason I made into a dynamic grid. And it does go negative as soon as you move it left or up. Just look at the element in your console. What part are you having trouble understanding?

Those definitions are out of date. I'm working on a new set, but until then, you're going to have to make due with what's available. No getter or overloads were included, so you're going to have to change those. // Getter time(): number; // And one of these setters time(value: number, suppressEvents?: boolean): TweenLite; time(value: number, suppressEvents?: boolean): TweenMax; time(value: number, suppressEvents?: boolean): TimelineLite; time(value: number, suppressEvents?: boolean): TimelineMax; You don't return any because then you can't chain your method calls with the correct type. TypeScript currently does not support returning something like this or self in a definition, so you have to manually write out a return for each type of GSAP instance (TweenLite, TweenMax, etc...) http://stackoverflow.com/questions/29309735/method-chaining-when-extending-typescript-classes

Are you trying to do something like this? http://codepen.io/osublake/pen/ByXWdP

Sorry for the delay. I've been dealing with responsive draggables for quite some time now, and my current approach is to just covert it's position to a percentage when you're done dragging. If you want to snap to a percentage, just convert it to a px value, and snap to that value. When you're done dragging, convert it back to a percentage, and you're good to go. In my demo, I calculate the snap during onDrag, both in percent and px values. I then store the percent value, and set the draggable to a px value. It will only snap while it's over the grid, so if I don't have a stored snap value, I just manually calculate it's position when setting it relative. Since my demo is based on a grid, I automatically adjust the snap values when you change them so that they will be evenly spaced. So if you enter 32 for snapX, it will change it to 33.333... If you were going after this behavior, you can check out how to calculate it in the marker's snapX/Y getter. http://codepen.io/osublake/pen/WbVRrj

Hi reanimator I created a demo that does this, but I got called out of town before I got a chance to upload it. I'll put it up on CodePen when I get back later tonight.

Good timing. I was just doing something similar to that. Standy by...

I'm having trouble figuring out what you're trying to do. Are you talking about making the grid percentage based, and you're having trouble snapping to a percentage? And by object's position, do mean you are storing the draggable's position as a percentage, the grid's position, the grid cells, or everything? If you could clarify or show me your problem, then I'll be able to help you out.