Rodrigo

Hi James, Nice effect, good job!! In terms of changing the display of course GSAP can do that, it handles any CSS property you throw at it, just keep in mind that the syntax is camelCase and that for that type of properties the value must be passed as a string, so your code would be like this: $(".control").click(function() { var nameo = $(this).attr('id'), showit = $("."+nameo), showLine = new TimelineLite(); showLine .to(box, .25, {scale:0, opacity:0.3, display:'none'}) .staggerTo(showit,.25, {scale:1, opacity: 1, display:'block'},.05); }); As you can see I created another timeline in order to handle the items in sequence, first you fade them out and then you show the filtered ones. As for keeping the active state of the buttons, that's a little more tricky. You definitely need to add something in the click event and some sort of conditional logic in the out event or simply remove the out event handler for that particular element and then add it again when you click another element. Best, Rodrigo

Mhhh I see the demo got "upgraded" a tiny bit.... Excellent job Carl!!! Yep the technique is new to me too, and the beauty of this is that, as the sample shows, the only thing you have to worry now is to get the path coordinates correctly and the engine does the rest for you. Is just amazing how little JS code is needed for something as cool as this. Happy tweening!!

Hi, A few days ago amar posted a similar question and looking and experimenting a little bit with this JQuery plugin: http://manos.malihu.gr/jquery-custom-content-scroller/ The results with Draggable aren't very good. That particular plugin works with the left or top property of the content container, while the parent of that one has an overflow:hidden property. When the Draggable instance was set to work with either of those properties the content container did moved, but the custom scrollbar didn't, then when you drag the scrollbar the content goes back to the position it had before being dragged with GSAP. The issue is that the plugin uses it's own code to record the property based on the different scroll events (keys and mouse wheel) but not external ones. The funny thing is that GSAP's Draggable does respect the current inline style, so if you drag the custom scrollbar and then you use Draggable to move the content you don't get any strange behaviour. One choice could be look and tweak the plugin's code and try to associate the current inline value instead of the recorded one, in order to make it work with Draggable. That could turn into quite a chore considering the fact that you'll need to read and interpret the code in order to make the necessary changes. The second alternative is to create your own scroll/draggable system using only GSAP and your custom graphic base, personally I'd choose this one, for consistency and animation efficiency reasons, GSAP is so much better than JQuery in animation every day of the week and twice every day of the week again You'll have to test the other plugins Jonathan posted in order to see how they work with Draggable. Best, Rodrigo.

Hi and welcome to the forums. I have no idea how you can achieve that but looking around I found this in stackoverflow: http://stackoverflow.com/questions/14275249/how-can-i-animate-a-progressive-drawing-of-svg-path/14282391#14282391 The first two answers are the key to this stuff and the beauty of this is that their using a very simple timer mechanism (setInterval), so it'll be super easy to replace that timer with an onUpdate call on a tween/timeline, so while you animate the elements the onUpdate callback of that tween will do the drawing. I did something similar to draw a circle using canvas, just update the circle's angle and redraw the entire canvas on each update. On how specifically the drawing works you'll have to look into that, but if you look at this example's code: http://phrogz.net/svg/progressively-drawing-svg-path-via-dasharray.html There are two things that caught my attention, the amount of code is ridiculously small and the magic happens in this function: function increaseLength(){ var pathLength = orig.getTotalLength(); length += distancePerPoint; orig.style.strokeDasharray = [length,pathLength].join(' '); if (length >= pathLength) clearInterval(timer); } Since my knowledge in SVG is even worst than my knowledge in Canvas I can't help you more than this, but it seems like a good starting point for what you're after. Also the engine has a plugin for RaphaelJS so you should take a look at that and the possibilities Raphael can give you in this matter. Also they use canvas to draw the path on top of the SVG and the same timer mechanism is used so this could be replaced in the same way using GSAP. I hope this can help you getting on your way and perhaps another user with more experience in SVG and Canvas could lend a hand. Best, Rodrigo.

Hi, Have you tried just Draggable and ThrowProps without the JQuery plugin?, please do it in order to narrow the possibilities about what could be causing the problem. Also looking at some of the plugin samples with dev tools, I noticed that the plugin works on the "top" and "left" property values and uses the overflow property as hidden, while Draggable does work on the scrollTop and scrollLeft, so perhaps the issue could be the fact that the scroll property can't be accessed. Try also changing Draggable from scroll to left like that it'd be working on the same property the plugin does, maybe it could work. Rodrigo.

Hi Steve, The value of left property stands for how far from the left border of it's parent or original position (depends on the element's position property)an element is, so bigger the value farther from the left border of the parent it'll be. Check the following links for more information and some samples: http://www.w3schools.com/cssref/pr_pos_left.asp https://developer.mozilla.org/en-US/docs/Web/CSS/left http://www.w3.org/TR/CSS2/visuren.html#position-props Rodrigo.

Hi Why don't you add the code gsap_test_03.js inside a script tag, before the closing body tag and call the init function at the end of the same file, I wouldn't recommend use the onLoad inside the body tag. Also there are some unnecessary stuff in your code, in HTML5 the doctype declaration can have only html in it and the html tag doesn't need all that stuff either. Take a look in google regarding doctype declaration and HTML5 tags. Best Rodrigo

Hi Try replacing the rest of the files you're using as well, remember that Draggable depends on TweenLite and the CSS plugin. Rodrigo.

Hi, Based on the background img size (16 x 12) the closest approach could be to change the initial position of the background div in the css by a multiple of those numbers: #header-background-move { position: absolute; z-index: 998; top: -240px;/* 12 * 20*/ left: -320px;/* 16 * 20 */ width: 100%; height: 100%; background: url(http://i.imgur.com/9DYY2W8.gif); padding: 0 300px 300px 0; } With those settings you get a more smooth loop. Rodrigo.

Hi I believe that the issue is that you're adding paused instances to the timeline, instead create the timeline paused, add the instances and use the buttons to control the timeline's playback, like this: var to = new TimelineLite({paused:true}); $("#button").click(function() { tl.to(logo4, 2, {vars}); tl.play(); }); Best Rodrigo

Hi What happens is that the engine records the initial value of the property being animated(background position in this case) and repeats the tween endlessly, from that original value to the ending value passed in the vars. Yep it is noticeable the jump on the background position when the tween loops. One solution could be tween the background in a multiple of the background's size, for example if the image is 10x10 px, tween it's position 400 px to the left and 200 px to the bottom. You'll have to play with those values and see how it goes, personally I've never done something like this nor I remember someone else in the forums doing it, so you're stepping into unknown territory, so to speak, the usual stuff is move a background image or an image sprite in certain amount. Best Rodrigo

Hi, Sure thing, just change it to TimelineMax, in the vars add repeat:-1, remove the second instance from the timeline and use Linear.easeNone in order to remove any acceleration/deceleration on the animation, like this: var tl = new TimelineMax({repeat:-1}); function backgroundMoveInitiate() { tl.to(headerBackgroundContainer, 6, {top:0, left: 0, ease:Linear.easeNone}); } backgroundMoveInitiate(); Give that code a try and let us know how it went. Also thanks for providing the codepen, it was vey helpful. I did notice though that you're using version 1.9.8, the latest engine version is 1.11, i'd recommend you to update your code and check regularly GSAP's CDNJS page: http://cdnjs.com/libraries/gsap/ And/or GSAP Github repository: https://github.com/greensock/GreenSock-JS Best, Rodrigo.

All those things are javascript magic tricks, of course there's nothing magical or tricky about them just a great example of how to use javascript. Long story short... in JS everything is an object and you can add as many properties you want to any object you want. In this case in the loop element refers to the DOM object, ie, the red DIV element you can see in the screen, in the case of your code. Under the hood it has a bunch of properties(CSS, events, browser-spcific stuff, etc). element.animation = tl; What this line means is: To the element (div in this case) add a new property called "animation" and assign to this property the object contained in the variable "tl", which is a timeline, which is also an object and has it's own properties and methods as well (you can see how deep the rabbit's hole goes, right?). Then you call the the event and the event handlers, mouseenter and mouseleave respectively. In those handlers this refers to the DOM element, which is the same DIV element you selected in every pass of the each loop. this.animation.play(); this.animation.reverse(); What those lines means is: When mouseenter happens, search the element's property called animation and execute (I don't know if execute is the right word) on it the method called play(). The same thing goes to mouseleave and reverse(). Since the animation property is a timeline and you can call those methods on it (play and reverse) the timeline plays and reverse when those events happens. Like this you can add several other tweens/timelines to any DOM element and apply any of the engine's methods to them on different situations. I'd recommend you to take a look at this links: Javascript tutorials https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide http://www.w3schools.com/js/default.asp JQuery http://www.w3schools.com/jquery/default.asp http://learn.jquery.com/ And always make a search in google and http://stackoverflow.com/ you'll find far better answers from people that have quite more knowledge than I do. You'll be surprised with the fact that everyday you'll learn new stuff. Best, Rodrigo.

Very simple just use JQuery's children() method to select the <p> tags in the divs: tl.to($(element).children('p'), .2, {opacity:0,ease:Quad.easeIn}); That should do it. Rodrigo.

It should be the same way, loop through the div elements, create and assign the timeline to each and then using the on method play and reverse the timeline for each event(over or out): $("div").each(function(index, element) { var tl = new TimelineLite({paused:true}); tl.to(element, .2, {opacity:0,ease:Quad.easeIn}); element.animation = tl; }); $("div").on('mouseenter', function() { this.animation.play(); }).on('mouseleave', function() { this.animation.reverse(); }); The beauty of this method is that when you loop through the elements you add a new property to the DOM element, in this case that property is the animation and after that you can call it like any other property of any element. Also keep in mind that when you use a JQuery selector and bind an event to it(mouseenter and mouseleave in this case) this refers to the DOM object itself while $(this) refers to the JQuery object. Rodrigo.

Hi Vincent, The best way is by adding the timeline to the DOM element, the guys created a superb example: http://codepen.io/GreenSock/pen/af138af51e5decd43c3c57e8d60d39a7 The issue with your sample is that every time you hover an item you add another tween to your timeline, perhaps that's good for a memorizing game but not a regular app As you can see is incredibly simple and in your case all you have to do is change the $("li") selector for $("div.class") and you'll be on your way. Rodrigo.

Hi, Just updated the codepen with a 3D sample: http://codepen.io/rhernando/pen/Kvwyt Rodrigo.

No problemo, we're here to help my friend. Happy Tweening!!

Jack beat me to it... Yep clearprops is the way to go, I set up a simple codepen: http://codepen.io/rhernando/pen/hzHdf Best, Rodrigo.

Sorry I had the impression that you were interested in keeping the Back.easeOut, that's why my suggestions went in that direction. Like Chrysto and Jack said the only way is how you're doing it, although I'll suggest to instead of using a callback to trigger the next tween, use a timeilne, perhaps the tiny amount of time for the code's execution could make it more smooth, try the following for the blue box: var tl = new TimelineLite({paused:true}); tl .to($('#box3'), .6, { top: 100, ease:Back.easeIn}) .to($('#box3'), 0.5, { top: 50, ease:Power4.easeOut}); $('#box3').on('click', function() { tl.play(0); }); The reason for play(0) is because with the reset button you put the boxes back to their original positions but the timeline's playhead is already at the end so using play() won't work after the first play, unless you add a tl.reverse() on the reset button. Best, Rodrigo.

Perhaps you could try some sort of mirror reflection effect in the image, that would give the sensation of continuity to the image being animated and is not too time consuming. Also keep in mind that the overshoot is not a lot of pixels so it wouldn't be too notorious. Best Rodrigo

I believe he means during the easing part of the animation, specifically when you work with elastic, bounce and back easing functions, they add a little overshoot in the element's position.

Hi, If the graphics container has an overflow:hidden there's no problem to make the graphic longer , you just have to add a negative margin-top equal to the amount of pixels the graphic has been enlarged. For example if you add 20 pixels to the graphic height then you add a margin-top:-20px in the element's style and since the container has an overflow hidden the excess won't be visible. Also it'd be very helpful if you could set up a reduced sample (codepen or jsfiddle) in order to get a better look at what you're after. Best, Rodrigo.

Chrysto is completely right, Jack gave a detailed answer in another topic with the reasons why this can't be done in one tween, you can see it here: http://forums.greensock.com/topic/7921-translating-css-cubic-bezier-easing-to-gsap/#entry30333 Rodrigo,

Hi, The reason is that set() instances are a shorthand equivalent to zero duration tweens, so you don't have to pass a second argument into the constructor after the tween target. //GOOD SYNTAX TweenLite.set(element, {vars}); //this is the same that the following line TweenLite.to(element, 0, {vars}); //BAD SYNTAX TweenLite.set(element, time, {vars}); //The engine is not expecting the time value so it returns an error Take a look at the API reference: http://api.greensock.com/js/com/greensock/TweenLite.html#set() Rodrigo.