Jonathan

Hello.. have you seen this nice tut @ creativebloq.. it might give you some ideas: http://www.creativebloq.com/html5/create-page-flip-effect-html5-canvas-8112798 and here is a jQuery Canvas plugin that might give you ideas as well: http://jpageflipper.codeplex.com/

in GSAP .. the translateY equivalent is the y property so you could also do this: TweenLite.set(ul, {y: '-200px'}); translateX = x translateY = y translateZ = z when i see your ul tag i see the transform matrix on the ul tag: transform: matrix(1, 0, 0, 1, 0, -200);

Hello and Welcome to the GreenSock Forum... when using the set() method you dont need to include the css:{} object http://jsfiddle.net/Md2WL/5/ TweenLite.set(ul, {transform: 'translateY(-200px)'}); set() method in GSAP DOC's: http://api.greensock.com/js/com/greensock/TweenLite.html#set()

also one last thing.. if your adding a class.. you could just add the class to the top parent of teh page.. like the body tag or a wrapper div. And then when you target those elements you can just include that body tag or wrapper div in the CSS rule.. so this way you dont have to add/remove classes on all your elements on the page since manipulating the DOM can be very slow so instead of having every element have that class you just have it in your CSS rule declaration: body.myClass div { // css properties go here } body.myClass span { // css properties go here } body.myClass p { // css properties go here } also your jQuery element objects could be: $("body.myClass div") but you get the point

you could try this and check if the element is tweening: http://api.greensock.com/js/com/greensock/TweenMax.html#isTweening%28%29 $(document).ready(function() { $('#Rt-arrow').click(function() { // only runs if #slider is NOT tweening if(!TweenMax.isTweening('#slider')){ TweenLite.to('#slider', 2, {x:"-=750"}); } return false; });// end click });// end ready alternatively you can do it other ways by setting a global variable and the only allow the tween if that variable is set by using the onComplete callback: $(document).ready(function() { var runThis = true; $('#Rt-arrow').click(function() { // only runs if #slider is NOT tweening if(runThis === true){ TweenLite.to('#slider', 2, {x:"-=750", onComplete:function(){ runThis = true; } }); } else { runThis = false; } return false; });// end click });// end ready

thats a good solution.. GSAP also has methods to animate from classname to classname... but you need to include the CSSPlugin.js .. unless your using TweenMax, then it is included with Tweenmax http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html className - allows you to morph between classes on an element. For example, let's say myElement has a class of "class1" currently and you want to change to "class2" and animate the differences, you could do this: TweenMax.to(myElement, 1, {className:"class2"}); And if you want to ADD the class to the existing one, you can simply use the "+=" prefix. To remove a class, use the "-=" prefix like this: TweenMax.to(myElement, 1, {className:"+=class2"}); Note: there are some css-related properties that don't tween like IE filters, but almost every css property is recognized and animates great. Also, there is a slight speed penalty when using className because the engine needs to loop through all of the css properties to see which ones are different.

you could try tweaking the inty variable in the desaturate() function which can help adjust luminance or perceived brightness function desaturate(r,g, { var inty = 0.4 * r + 0.60 * g + 0.12 * b, // intensity a = 1; // 0 to 1 amount of desaturation - can also be 0.5, etc r = inty * a + r * (1 - a) >> 0; g = inty * a + g * (1 - a) >> 0; b = inty * a + b * (1 - a) >> 0; return "rgb(" + r + ", " + g + ", " + b + ")"; } you could change this line: var inty = 0.4 * r + 0.60 * g + 0.12 * b, // intensity to this: var inty = 0.3 * r + 0.58 * g + 0.10 * b, // intensity more or less tweaking those values good reference on Luma and Luminance: http://en.wikipedia.org/wiki/Luma_%28video%29 http://en.wikipedia.org/wiki/Luminance_%28relative%29

Hello and Welcome to the GreenSock Forums: you can try relative values: $(document).ready(function() { $('#Rt-arrow').click(function() { TweenLite.to('#slider', 2, {x:"-=750"}); });// end click });// end ready noticed i used "-=750" .. that will cause the element to be moved -750 to the right on every click.. if you did "+=750" it would add and move the element 750px to the left from DOCs: http://api.greensock.com/js/com/greensock/TimelineLite.html

to do the whole page and all its elements would be some effort since i would need to know how many and what elements you were trying to make grayscale? basically that desaturate function just grabs the RGB values and interpolates them to grayscale values the example can also be modified so instead of just statically turning to grayscale you could animate it with GSAP and let GSAP animate from color to grayscale if you were doing all the elements at once you can use the to() method or you could use the GSAP stagggerTo() method to have each element turn grayscale one each after another modified previous codepen with GSAP tween: http://codepen.io/jonathan/pen/HoBLp so this: function desaturateElement(el) { var $el = $(el), color = $el.css('color').match(/\d+/g), bg = $el.css('backgroundColor').match(/\d+/g); $el.css({ "color": desaturate(color[0], color[1], color[2]), "backgroundColor": desaturate(bg[0], bg[1], bg[2]) }); } could possible become this: function desaturateElement(el) { var $el = $(el), color = $el.css('color').match(/\d+/g), bg = $el.css('backgroundColor').match(/\d+/g); TweenMax.to($el, 2, { css:{ "color": desaturate(color[0], color[1], color[2]), "backgroundColor": desaturate(bg[0], bg[1], bg[2]) }, ease:Power4.easeOut }); }

GSAP will run fine.. try going here again.. http://codepen.io/jonathan/pen/gvCAu i basically commented out the if statement checking if the element had the animationRunning class.. so now that it is commented out you can keep hovering in and out and GSAP will animate based on the events

how about this. http://codepen.io/jonathan/pen/gvCAu you will use the onCompleteParams to pass the $this variable to your function in the onComplete callback for example: var mainTweenSlideDown= new TimelineLite({ paused:true, onCompleteParams:[$this], // pass $this to the turnGreen onComplete callback function onComplete:turnGreen }); onComplete: Function - A function that should be called when the tween has completed onCompleteParams: Array - An Array of parameters to pass the onComplete function. For example, TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like: onCompleteParams:["{self}", "param2"] found in the GSAP DOCS: http://api.greensock.com/js/com/greensock/TimelineLite.html

cool.. basically im passing the $this variable which represents the current element being hovered over or out.. and pass that as a parameter to through the function. So the function can utilize the $this variable. If i didnt pass the $this variable i would have to first declare it outside the scope of the mouseenter and mouseleave event handlers so they can be used in a global scope and context technically you woudlnt need those functions to be outside the mouseenter and mouseleave anonymous functions if they are only being run for those 2 events you could also do this without those functions if they only run for mouseeneter and mouseleave, and have there inside "do stuff code" inside the events: http://codepen.io/jonathan/pen/GEFqu

Hello.. I dont see any support for GSAP JS version for animating CSS filters as of now.. But there are ways using CSS3 filters but they are limited to specific browsers.. for instance the grayscale filter is only available in the public releases of Webkit browsers. So for now, you can download Canary when testing the grayscale filter. img { -webkit-filter: grayscale(100%); } also using SVG+XML within a CSS filter grayscale: http://jsfiddle.net/KDtAX/487/ Im sure if you can provide a jsfiddle or codepen example with your JS, CSS, and HTML .. we can come up with a solution since the above i listed are really not ready for prime time due to browser compatibility http://caniuse.com/css-filters since you only want to change DIV and its children to grayscale, im sure that can be done with GSAP JS by animating the color values of the DIV and its children to a grayscale color value you could possible change color values on an element in JavaScript and jQuery like this: http://codepen.io/jonathan/pen/dkyKu

when i went to your pen it was not even working.. so im not sure exactly how it is supposed to behave but... I removed the BODY tag from the HTML part since the body tag is already part of the codepen. And i moved your revert and turnGreen functions outside of the event handler. http://codepen.io/jonathan/pen/IdEuD how is this .. ?

Great thanks.. you might have to make your image paths absolute (ie.. so they have the full path to the image).. jsfiddle is throwing not found image errors in the console..

you could run each block through a for loop or jQuery each() and apply the auto increment.. or if your are using PHP you could have it auto increment server side before page load.. do you have a limited test case example set up via jsfiddle or codepen so we can see the context with your JS, CSS, and HTML

Hello Im trying to follow your link from above to your project site.. but the site is really slow and im getting this error in the console: ReferenceError: head is not defined head.js('http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js') http://htmlfabric.ru/test/club/js/js_attach.js LINE 1

hello.. here is a list of all the browsers APNG is compatible with: http://caniuse.com/apng

it is possible with GSAP.. you can create anything and everything that has any type of animation functionality using GSAP. GSAP handles animation way better than jQuery or any other javascript library that tries to animate . check out http://www.greensock.com/why-gsap/ http://www.greensock.com/get-started-js/

Also have you looked at GSAP Draggable and ThrowProps Plugins? http://www.greensock.com/draggable/ It has functionality to Scroll (Drag and Flick)

great link

for that you would need to make your own Scrollbar UI with HTML, CSS, JS.. since the browsers styling is based on the operating system OR you can look at these jQuery ones and just change css and images http://jscrollpane.kelvinluck.com/ http://manos.malihu.gr/jquery-custom-content-scroller/ http://baijs.nl/tinyscrollbar/

Hello and Welcome to the GreenSock Forums.. you can add the css overflow property: http://codepen.io/jonathan/pen/eEvcd div { overflow:auto; } make sure you add a width and definitely a height to your div so the browser can render the scroll bars https://developer.mozilla.org/en-US/docs/Web/CSS/overflow you might have to play with the width so you don't get horizontal scroll bars overflow-x and overlfow-y might need a vendor prefix due to the fact that they are experimental css properties that are not supported the same in all browsers

ohh.. my bad im sorry lowercase BAD .. uppercase GOOD dont know how i missed that.. damn my eyes ... THANK YOU JACK

thanks jack .. but my codepen is using force3d lowercase and you can see that message in the console, .. .. and i also see this on my production code http://codepen.io/jonathan/pen/Hcvuq i am seeing this in: Firefox 24 Chrome 30.0.1599.101 m IE10 is it ok to ignore this message