Search the Community

Ah, that explains it. Well, there are only three ways to get this effect that I know of - either use some sort of canvas library (which means moving away from your pure DOM approach) or SVG filters or use CSS filters which don't have great support across browsers. Unfortunately, I don't have a quick solution whipped up for you, but hopefully this gives you a nudge in the right direction.

If you need all sections of a book page to be zoomable based on a defined grid, I whipped up a quick pen that does this using a single image tag in the markup. - JS builds a grid of <div>s - Takes the single image and applies it as a background on a defined number of tiles - It then positions that image background on each tile to create a mosaic representing the single full screen image - Clicking any of the tiles simply scales that tile One thing I didn't do was the logic to center the scaled tile ... just to get the above idea across quickly. http://codepen.io/sgorneau/pen/wJgKyG?editors=0010

First of all, thanks for being a Club GreenSock member. Your support means a lot. Sorry to hear about the frustration. I'm pretty confident that we can help you get whatever hooks you need to make this GUI thing you're attempting. The more familiar you get with the API, the more I bet you'll find that GSAP is absolutely ideal for building a GUI around. There are quite a few things we've had to engineer GSAP around like performance and memory management. We can't just store a permanent reference to every tween ever created because that'd just cause memory to climb and prevent things from being GC'd. That being said, since around version 1.18.4 we've had a protected "id" property you can add to the vars object and it'll be preserved (not treated like a property that should be tweened). You could leverage that if you'd like, or use the "data" property that's always existed. Here are two functions I whipped together for you that'll let you search for things by "id" and it'll find anything that hasn't completed and made available for GC: function getChildById(timeline, id) { var tween = timeline._first, sub; while (tween) { if (tween.vars.id === id) { return tween; } else if (!(tween instanceof TweenLite)) { sub = getChildById(tween, id); if (sub) { return sub; } } tween = tween._next; } } function getAnimationById(id) { return getChildById(com.greensock.core.Animation._rootTimeline, id); } So it should be as simple as getAnimationById("yourID") Does that help? Instead of having GSAP manage all the references, though, you could do that yourself just like Carl indicated. That way, you have total control over when/how things are dumped and made available for GC. The point is you've got a lot of options with GSAP.

Here are two options I whipped together: Using wiggles (more "swarmy") http://codepen.io/GreenSock/pen/fd44a028769d09548f7ce9c2ca6ed02c/ (noticed I changed the cy to center the dots to begin with) And a recursive tweening action in a function that calls itself onComplete (more "just moves to random spots"): http://codepen.io/GreenSock/pen/d614fc7ea7b00eda57f752ea5b0ac792/ Do those help?

There are actually a bunch of issues to cover here (none of which are your fault), and I think I've got a solution... First, the browser sees a regular dash character as a legitimate place to break a word onto another line but SplitText offers the ability to wrap each word in a <div> (and a "word" would include that dash), and a <div> cannot be split onto multiple lines thus it's fundamentally impossible to accommodate both behaviors. So part of the solution involves swapping in a non-breaking dash character in for the regular ones. Another problem is that most browsers these days have started doing some kerning by default which messes things up. For example, if you have the characters "Va" next to each other, the browser will render them closer together than if you wrap each in a <span> or <div>, like "<span>V</span><span>a</span>". A solution for that is to inject a zero-width non-joiner character ("‌") into those spots to prevent the kerning like "V‌a". Lastly, ligatures can really mess up the spacing as well. If you have an "f" and an "i" right next to each other, many browsers will nudge them together and make them into a special ligature. In theory you're supposed to be able to set a CSS property to prevent that, but in my experiments Firefox completely ignored all properties that are supposed to prevent ligatures. So again, the zero-width non-joiner character comes to the rescue. Injecting one between any occurences of "fi" will solve that. I whipped together a function that'll "clean" the text for you - all you've gotta do is pass in selector text OR an element OR a jQuery object: function cleanText(e) { if (typeof(e) === "string") { return cleanText(document.querySelectorAll(e)); } else if (e[0] && e[0].innerHTML) { for (var i = 0; i < e.length; i++) { cleanText(e[i]); } return; } e.innerHTML = e.innerHTML.replace(/\-/g, "‑").replace(/V/g, "‌V‌").replace(/\./g, "‌.‌").replace(/,/g, "‌,‌").replace(/A/g, "‌A‌").replace(/fi/g, "f‌i"); } Usage: cleanText("#text"); To help prevent ligatures from kicking in, it helped to put a tiny bit of letter-spacing, like -0.0005em. Firefox had some odd ways of antialiasing lines of text that didn't land on whole pixels, thus it's important to define a px-based line-height. Lastly, I noticed a bug in some browsers that caused them to report the offsetTop of the non-breaking dash incorrectly (like a few pixels off), so I had to make an adjustment in SplitText to work around that. I put an updated version of the codepen-specific SplitText here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js Phew! Here's a fork of your codepen that seems to be working pretty well for me: http://codepen.io/anon/pen/RRRvqj Does that solve things for you?

Just to get an idea of what you are looking to do ... does this code pen illustrate that? http://codepen.io/sgorneau/pen/xGBMQL?editors=001 This is by no means the code I would use ... I just whipped something up to get an idea of what you need.

Right - SVG coordinates work kinda like position:absolute anyway (at least in the context of the parent <svg> canvas, not the entire web page). The challenge here is that there are several different properties that can all affect the position: Attributes like "x" and "y", as in <rect x="20 y="50" ... > or cx/cy/r for circles. The transform attribute, as in <rect transform="matrix(1, 0, 0, 1, 20, 50)" ...> CSS-based transforms, as in <rect style="transform: matrix(1, 0, 0, 1, 20, 50)" ...> I'd personally recommend sticking with only one of them for positioning to keep things simple. Although I guess a complicating factor would be the fact that you can have groups with the <g> tag which itself can have transforms applied. Yummy. You can use the getBBox() method on an SVG element to get the bounding box, and leverage that to make things line up using math. Perhaps it'd be best if you whipped together a sample codepen that demonstrates your particular scenario so that we can get out of the theoretical and get into the practical. Sometimes that really helps solutions emerge.

After a lot of back & forth regarding animation on a current project, I whipped up an export script to translate After Effects CC compositions into TweenMax/TimelineMax documents. I'll be adding more documentation & examples, but if you'd like to give it a try, you can find the script at: https://github.com/Meandmybadself/AfterMax

hmm, this really has little to do with GreenSock, and typically questions like this are better suited for stackoverflow or other general javascript forums but I whipped up a very basic example: http://codepen.io/GreenSock/pen/dff9e94b4880a59cd72840305e665a9e/ I wasn't sure about: - if the value set for position x for the blue square was supposed to be the same value for position x of the green square - when you say "both squares" tween to the right, I wasn't sure which 2 of the 3 squares you were referring.. I guesed blue and green. - what you mean by vice versa (in this context) Hope this gets you on your way. Happy Tweening!

Yeah, maybe it'd help if you whipped together a super simple codepen demo that shows the behavior you want - I'm having a tough time visualizing the challenge(s). I bet once I saw a codepen, the light would go on. http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

Glad you're enjoying Draggable. I have good news for you... I've attached an updated version of Draggable that adds a "x" and "y" properties to the Draggable instance(s). So you can get those values very easily. The new version also has a really interesting new capability - you can set type:"scroll" and it'll make the content inside of that div drag-scrollable! And set type:"scrollTop" if you just want it to scroll up and down, or type:"scrollLeft" to scroll horizontally only. The goal was to make it very fluid, just like the native iOS scrolling, but even better (you can tweak values to get exactly the feel you want). And it doesn't use a fake/simulated scrollbar like most of the other tools out there - it's the real, native scrollbar from your OS and it reacts to the mouse wheel and everything. And of course you need ThrowPropsPlugin (a members-only benefit of Club GreenSock) to enable the flick-scrolling. I know you're already a member - I'm just mentioning it for others who are reading this. I improved touch performance for mobile devices in this most recent version (not that it was bad before, but it's even better now). There's a quick demo I whipped together here that shows all the various types and it generates sample code: http://greensock.com/js/demo/throwprops/ (that link will be good for at least the next week) I didn't quite understand your question #2 - could you elaborate? Since you were mentioning scrollTo, maybe the new type:"scroll" already addresses your concern and saves you a bunch of work (I hope so). Otherwise, let me know what exactly you're looking for. That new scroll feature should even work all the way back to IE8! And trust me - it was a royal pain in the butt to build because of all the differences amongst browser vendors but I think the end result is pretty solid, at least according to my tests thus far. Kick the tires of this new version and let me know what you think. Happy tweening...er...dragging!

Excellent questions. Obviously you're very knowledgeable about both KineticJS and GSAP. That's fantastic. Okay, so I must admit I'm not super familiar with the guts of KineticJS, but I totally understand how performance sensitive redrawing the canvas can be and how important it is to avoid duplicate calls to the draw() method on a layer. That's why GSAP's KineticPlugin manages that for you and ensures that it only calls draw() once on a layer each tick of the engine. Here's basically how it works... Each time a tween updates a KineticJS object's property, it marks its layer internally as needing a redraw and then when ALL tweens are finished (when the core ticker dispatches a "tick" event), it rips through that list that it recorded internally and calls draw() on the appropriate layers. So it doesn't matter if you have 100 timelines with 1000 tweens of various objects - the engine will only call draw() once on each layer (and only the ones that need it). I'm pretty sure this is basically what Eric's new batchDraw functionality does. I don't think there's a need to tap into that because GSAP's KineticPlugin is already doing that work nicely. I also know that Eric recently introduced a new "Tween" class that's native to KineticJS and it is tied into the batchDraw functionality under the hood. He still recommends GSAP to his users, but he needed to have a basic tweening engine in KineticJS to silence potential licensing concerns (plus I'm sure he wanted to serve his audience well by at least giving them some built-in tweening controls). I think it's best in these cases to run some benchmarks and see how things compare because if the Kinetic.Tween class performs significantly better than GSAP+KineticPlugin, it would indicate we need to do some work on our plugin. So I whipped together a relatively simple set of benchmark files that just animate 800 objects across the screen randomly over the course of 12 seconds. I have attached those files. See for yourself - GSAP with KineticPlugin is significantly smoother (at least on my computer). Feel free to crank up the "creatureCount" variable to put more stress on things. The difference was very noticeable for me. This tells me we're doing something right in terms of optimization and managing the draw() calls. One thing to note is that since the Kinetic.Tween class doesn't have any "delay" feature, I had to resort to using setTimeout() to schedule the tweens. If you know of a better way, please tell me. Also worth noting: the latest version of KineticPlugin for GSAP also integrates with DirectionalRotationPlugin, so you can do things like this: TweenLite.to(obj, 2, {kinetic:{rotationDeg:"270_ccw"}}); In other words, you can control the direction of the rotation by adding "_ccw" for counter-clockwise, "_cw" for clockwise, and "_short" for whichever is shortest. This new version of the plugin hasn't been released yet, but it's in the zip that's attached to this thread if you want to give it a shot. So the benefits of using the KineticPlugin are: It automatically manages the draw() calls for the appropriate layers, optimizing performance You can use regular property names like "x", "y", "rotation", etc. instead of "setX", "setY", "setRotation", etc. It automatically figures out how to tween color-related values which you can define in pretty much any format, like #F00, #FF0000, rgb(255,0,0), "red", or "hsl(20, 50%, 70%)", or even rgba() and hsla(). It integrates with BezierPlugin, including the autoRotate feature It integrates with DirectionalRotationPlugin It integrates with RoundPropsPlugin Does that clear things up for you? Kinetic_Benchmark.zip

I whipped together a KineticPlugin that should make this easier. It handles all the basic properties like x, y, scaleX, scaleY, rotationDeg, opacity, etc. and it calls the layer's draw() method after each update for you (unless you specify autoDraw:false). So here's the code with and without the plugin: //OLD (without plugin) (couldn't handle scaleX/scaleY well): TweenLite.to(rect, 2, {setX:100, setY:300, setRotationDeg:45, setOpacity:0.5, onUpdate:layer.draw, onUpdateScope:layer}); //NEW (with plugin) (notice scaleX and scaleY work!): TweenLite.to(rect, 2, {kinetic:{x:100, y:300, rotationDeg:45, scaleX:0.5, scaleY:0.8, opacity:0.5}}); It still works fine if you use the longer names, like setX, setY, etc. I just figured the shorter ones are a nice convenience. And of course it handles the scale, scaleX, and scaleY values just fine because it does some fancy footwork behind the scenes to ensure it's feeding the appropriate values to Kinetic's rather unconventional setScale() method. Does that help? KineticPlugin.js.zip

All good solutions, but I thought I'd throw one more out there: it'd be pretty easy to create a plugin for this sort of functionality. The plugin could record the original text and revert it if necessary. In fact, I just whipped together a plugin for you that does exactly that. See the attached file. Once you load the plugin, the code is pretty simple: //we'll yoyo a TimelineMax so that you can see that things work backwards and forward var tl = new TimelineMax({delay:1, repeat:-1, yoyo:true, repeatDelay:1}); //add the first set() call a little offset from the beginning so that when we yoyo and delay the repeat for a second, it shows the original text tl.set("#content", {text:"First change of text."}, 0.001); tl.set("#content", {text:"Second text change goes here."}, "+=1"); tl.set("#content", {text:"Final change of text here."}, "+=1"); As a little bonus, I made the plugin so that by default, it will toggle letter-by-letter, kinda like a typewriter. You won't see that in the example above because we're using set() which is just like a zero-duration tween, but feel free to experiment with doing to() tweens and you'll see. You can optionally set some variables too that will make the text go word-by-word instead of letter-by-letter. Wrap your stuff in an object ({}) and use the "delimiter" special property and set it to a space (" ") like: TweenLite.to(element, 3, {text:{delimiter:" ", value:"This is the new text"}, ease:Linear.easeNone}); I hope this is helpful. TextPlugin_Example.zip

Sure, it's actually easier than you might think. I whipped together a codepen for you: http://codepen.io/GreenSock/pen/297827d7dd99d0eb44f96b6b75328338 It was kinda fun. Here's the basic code (but check out the codepen - it makes more sense in context) $(window).ready(function() { var quantity = 30, //number of dots duration = 3, //duration (in seconds) path = [{x:0, y:0}, {x:50, y:100}, {x:300, y:20}, {x:400, y:200}, {x:500, y:0}], //points on the path (BezierPlugin will plot a Bezier through these). Adjust however you please. position = {x:path[0].x, y:path[0].y}, //tracks the current position, so we set it initially to the first node in the path. It's the target of the tween. tween = TweenMax.to(position, quantity, {bezier:path, ease:Linear.easeNone}), //this does all the work of figuring out the positions over time. tl = new TimelineMax({repeat:-1, yoyo:true}), //we'll use a TimelineMax to schedule things. You can then have total control of playback. pause(), resume(), reverse(), whatever. i, dot; //we can remove the first point on the path because the position is already there and we want to draw the Bezier from there through the other points path.shift(); for (i = 0; i < quantity; i++) { tween.time(i); //jumps to the appropriate time in the tween, causing position.x and position.y to be updated accordingly. dot = $("<div />", {id:"dot"+i}).addClass("dot").css({left:position.x+"px", top:position.y+"px"}).appendTo("body"); //create a new dot, add the .dot class, set the position, and add it to the body. tl.set(dot, {visibility:"visible"}, i * (duration / quantity)); //toggle the visibility on at the appropriate time. } }); Is that what you were looking for?

The problem with all-in-one solutions is that...well...they're all-in-one, so they have a very hard time being EXCELLENT at all of those things. Plus they can tend to get extremely bloated over time as they try to be all things to all people. Nothing against jQuery - I think it's fantastic. But when it comes to animation it's...well...not even close to delivering what GSAP does. Seriously, no contest. Look at the example that was whipped together pretty quickly here: http://www.greensock.com/css3/ and try doing that with jQuery. Or any other scripted animation tool. Notice the scrubber at the bottom too. If your goal is to just fade some things in or animate the top/left of a few divs, you'll be fine with jQuery.animate(). But once you start needing to do something more aggressive or innovative, you'll quickly run into a wall. As far as file size goes, you don't need TweenMax. Just load TweenLite and CSSPlugin. Those are less than 18kb combined (gzipped). And like Jamie said, with caching the file size issue quickly goes away. Have you seen the speed test at http://www.greensock.com/js/speed.html? I didn't quite understand your comment/question about "and as i understand it slideToogle, scrollTop etc.. will default to jquery animate anyway." - could you explain? The only things that defaults to the native jQuery.animate() method are "toggle", "show", "hide", and anything that has a "step" function defined (which is pretty uncommon).

That is indeed tricky because those aren't DOM elements so there's no way to reference them in JavaScript. However, I think I have a solution. It is possible to get the actual style sheet data and tween THOSE values (which would affect objects with that style globally on the page rather than a single element). For example, if you have a CSS class named ".myClass" that sets a background-color to "#FF0000", you could tween that to a different color and ALL of the objects on the page that use ".myClass" would have their background color change. See what I mean? I whipped together a CSSRulePlugin that should help with this. Here's how it works... The plugin itself actually has a static "getRule()" method that you can use to grab a reference to the style sheet itself based on the selector you used in your CSS. For example, let's say you have CSS like this: .myClass { color:#FF0000; } .myClass:before { content:"This content is before."; color:#00FF00; } Now let's say you want to tween the color of the .myClass:before to blue. Make sure you load the attached CSSRulePlugin.js and then you can do this: var rule = CSSRulePlugin.getRule(".myClass:before"); TweenLite.to(rule, 3, {cssRule:{color:"#0000FF"}}); And if you want to get ALL of the :before pseudo elements, the getRule() will return an array of them, so I could do this: TweenLite.to( CSSRulePlugin.getRule(":before"), 3, {cssRule:{color:"#0000CC"}}); I haven't done extensive testing on CSSRulePlugin, but it seemed to work in all the major browsers. I'd love to hear what you think. Just keep in mind that it is typically best to tween a value that has already been defined in the rule that you're selecting because it cannot do a calculated style. For example, if we didn't define any color initially for the .myClass:before and tried to tween its color to blue, it would start transparent and go to blue. One way around this is to simply set your starting values explicitly in the tween by doing a fromTo(). That way there's no having to guess what the starting value is supposed to be when it isn't defined previously. In summary, the CSSRulePlugin allows you to tween the style sheet rule itself rather than a particular DOM element's style property. Don't forget to wrap your values in a cssRule:{} object. Does this help? CSSRulePlugin.zip

First let me break down how you can do this with an onUpdate callback: //returns the current horizontal scroll position function getScrollX() { return (window.pageXOffset != null) ? window.pageXOffset : (document.documentElement.scrollLeft != null) ? document.documentElement.scrollLeft : document.body.scrollLeft; } //returns the current vertical scroll position function getScrollY() { return (window.pageYOffset != null) ? window.pageYOffset : (document.documentElement.scrollTop != null) ? document.documentElement.scrollTop : document.body.scrollTop; } $("#box1").click(function(e) { var curScroll = {x:getScrollX(), y:getScrollY()}; TweenLite.to(curScroll, 1, {y:0, onUpdate:function() { window.scrollTo(curScroll.x, curScroll.y); }}); }); The trickiest part is just figuring out the current scroll position. So I whipped together a plugin that should make this easier for you (attached). Once you load the plugin, it'd be as simple as: $("#box1").click(function(e) { TweenLite.to(window, 1, {scrollTo:{y:0}}); }); And of course you could control the x position as well, and/or add an ease like this: $("#box1").click(function(e) { TweenLite.to(window, 1, {scrollTo:{y:0, x:0}, ease:Power2.easeInOut}); }); Does that help? ScrollToPlugin.zip