Jonathan

Im sorry pkunzipula .. .. it looks like when i pasted my code above in there, it carried over some special character dots for some reason.. i have updated my code above and provided a codepen example here.. sorry about that http://codepen.io/jonathan/pen/tjwec also if you go to this page: http://www.greensock.com/css3/ and scroll to boxShadow you can see some of Jack and Carl's cool examples with code

you could try some thing like this var $element = $("#element"); $element.on("mouseenter", function(){ TweenMax.to($(this), 0.4, { boxShadow: "0px 1px 15px 10px rgba(24,178,7,0.8)", repeat: -1, yoyo: true, ease: Linear.easeNone }); }).on("mouseleave", function(){ TweenMax.to($(this), 0.4, { boxShadow: "0px 1px 5px 5px rgba(24,178,7,0.2)", yoyo: true, ease: Linear.easeNone }); }); plus the ones that Rodrigo pointed to are a great start as well

do you have a link to the webpage or files? .. so we can better help you

yes jack .. thanks for the clarification

i have a question then Jack or Carl... so since its perfectly acceptable to mix TweenMax and TweenLite.. what would be faster using TweenMax or including separate js files along with TweenLite.. like CSS plugin, etci know its best to cut down on server requests but as far as GSAP like you described above .. which is faster regradless of multiple server requests .. including one TweenMax file or TweenLite and other GSAP plugins?thx ahead of time

oh regarding your changing the images holders from an anchor tag to a div.. making it to work in iE7.. that is because an anchor tag has its display property set to display:inline.. a div tags display property is set to display:block.. so if you needed to put back your anchor tags you can just add the display:block to that image holder css also have you tried setting your images css to this #wrapper a img { max-width:100% height:auto; } if your using css background-image instead of an actual image tag than try those styles on that element you have the background-image or background shorthand property on also when you are viewing this in IE8 .. what is the Document Mode and Browser Mode set to?if you press F12 in IE the inspector will come up and you can let us know the Document Mode and Browser Mode if you are viewing in iE8 .. make sure that the Browser Mode is IE8 and the Document Mode is IE8 Standards is this IE8 standalone or is it IE9 or IE10 rendering the different Browser mode? also what is the OS you are using Windows version ? .. or a iOS version?? an example of your code either a codepen or jsfiddle example will help alot

yes i second Jamies advice.. if you are including TweenMax.js in your webs page.. than it is always best to be consistent, and use TweenMax any time you are creating your tweens, since that is the library you are using.. so try and convert all TweenLite to TweenMax.. also if you could provide a codepen or jsfiddle example we can better help you

hello.. TweenMax is supported in all major browsers. it even works in IE7.. but if you could provide an example of your issue in codeoen or jsfiddle to better help you.. go to this link and see the animation banner.. http://www.greensock.com/why-gsap/ a quote from the Why GSAP page: usually that type of error is related to the syntax used in your tweens.. please provide a sample of your code so we can help with this issue .. thx

for iE10 you have to animate each of its child elements you want rotated.. since like Carl said they did not include transform-style:preserve-3d into the IE10 engine. if you read under transform-style in Carl's MSDN link.. it reads: they say to manually apply the parents elements transform to each of its child which is very tedious.. but that is why IE is my mortal enemy

the reason the variable works without a string is because you are using native javascript. You are using this: var profileHero = document.getElementById("profileHero"); document.getElementById() is a not jQuery.. its the faster native javascript way of referencing a element object with a specific ID of a tag .. if you were to do it the jQuery way it would look like this: var profileHero = $("#profileHero"); or you could just pass the string like "#profileHero" if jQuery is included in your page to get the hang of GSAP i suggest to bookmark the DOCs .. its a great resource: http://api.greensock.com/js/ and it looks like the ui slider is positioned above the marquee gallery because of the floats you have on the ui slider.. you have a float left and clear left on it

if you were to use jquery with GSAP you still couldnt use just "profileHero" .. in that case you would use "#profileHero" .. notice the hash tag #, which represents the ID attribute of the tag your targeting .. when jQuery is included with GSAP on the page.. then GSAP can use the selector syntax used in jQuery in its target parameter yeah post your code example for the loading gif you want to do and im sure we can help you in that case you can have a css class on your main wrapper div in your html markup.. that has the loading gif background property.. then once the page loads.. meaning inside the window.load event you would add javascript to remove the class from the wrapper div and fadein/show your elements

you need to remove the quotes around your variables.. the quotes make it a string.. so remove the quotes you had this which was wrong syntax for profileHero: var profileHero = document.getElementById("profileHero"); tl.from("profileHero", 1, {left: "+=90px"}, "profileHero") you need to remove the quotes around profileHero in this case: var profileHero = document.getElementById("profileHero"); tl.from(profileHero, 1, {left: "+=90px"}, "profileHero") here is your code with variables corrected for the to() and from() methods: window.onload = function() { var profileHero = document.getElementById("profileHero"); var slopeCap = document.getElementById("slopeCap"); var elegantCap = document.getElementById("elegantCap"); var dualMarq = document.getElementById("dualMarq"); var arcMarq = document.getElementById("arcMarq"); var tl = new TimelineMax({repeat: 5}); tl.from(profileHero, 1, {left: "+=90px"}, "profileHero") .from(profileHero, .8, {autoAlpha:0}, .2) .from(slopeCap, .7, {left: "+=40px", autoAlpha:0}, "profileHero+=.4") .from(elegantCap, 1, {left: "+=40px", autoAlpha:0}, "profileHero+=.4") .add("introReturnLabel", "+=2.5") .to(profileHero, 0.5, {left: "-=50px", autoAlpha:0}, "introReturnLabel") .to(slopeCap, 0.5, {left: "-=50px", autoAlpha:0}, "introReturnLabel") .to(elegantCap, 0.5, {left: "-=50px", autoAlpha:0}, "introReturnLabel") .from(dualMarq, 0.5, {left: "+=20px", autoAlpha:0}) .add("dualReturnLabel", "+=2") .to(dualMarq, 0.5, {left: "-=50px", autoAlpha:0}, "dualReturnLabel") .from(arcMarq, 0.5, {left: "+=20px", autoAlpha:0}) .add("arcReturnLabel", "+=2") .to(arcMarq, 0.5, {left: "-=50px", autoAlpha:0}, "arcReturnLabel") .from(dualPadMarq, 0.5, {left: "+=20px", autoAlpha:0}) .add("dualPadReturnLabel", "+=2") .to(dualPadMarq, 0.5, {left: "-=50px", autoAlpha:0}, "dualPadReturnLabel") .from(aboveMarq, 0.5, {left: "+=20px", autoAlpha:0}) .add("aboveReturnLabel", "+=2") .to(aboveMarq, 0.5, {left: "-=50px", autoAlpha:0}, "aboveReturnLabel") .from(keyboardMarq, 0.5, {left: "+=20px", autoAlpha:0}) .add("keyboardReturnLabel", "+=2") .to(keyboardMarq, 0.5, {left: "-=50px", autoAlpha:0}, "aboveReturnLabel") .add("keyboardOutReturnLabel", "+=3") .to(keyboardMarq, 0.5, {left: "-=50px", autoAlpha:0}, "keyboardOutReturnLabel"); } your to() and from() methods had the ID variable instance as a string instead of as a variable.. notice in the code above, i removed the quotes you had around the ID variables for the GSAP target selector you are using native javascript document.getElementById() ..which has nothing to do with jQuery .. do you see what i mean ??

hello what is the order of your script tags? are you running your GSAP code after both jQuery and GSAP has been loaded? scripts in head: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script> </head> <body> </body> </html> scripts in the bottom the body tag: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script> </body> </html> do you have the jQuery and GSAP library script tags both declared in the head or before the ending body tag? are you also waiting for the DOM to be ready before running your custom GSAP code? it would be good to give us an example of the page so we can better help you.

Hello and Welcome to the Greensock forums you could use any of the kill methods depending on your situation: _________________________________________________________________ kill() Kills the animation entirely or in part depending on the parameters. http://api.greensock.com/js/com/greensock/core/Animation.html#kill() //kill the entire animation: myAnimation.kill(); //kill only the "x" and "y" properties of the animation (all targets): myAnimation.kill({x:true, y:true}); //kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected): myAnimation.kill(null, myObject); //kill only the "x" and "y" properties of animations of the target "myObject": myAnimation.kill({x:true, y:true}, myObject); //kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2": myAnimation.kill({opacity:true}, [myObject1, myObject2]); _________________________________________________________________ killAll() Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first. http://api.greensock.com/js/com/greensock/TweenMax.html#killAll() //kill everything TweenMax.killAll(); //kill only tweens, but not delayedCalls or timelines TweenMax.killAll(false, true, false, false); //kill only delayedCalls TweenMax.killAll(false, false, true, false); _________________________________________________________________ killChildTweensOf() Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first. http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf() <div id="d1"> <div id="d2"> <img src="photo.jpg" id="image" /> </div> </div> <div id="d3"></div> TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("image"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}}); //only kills the first 2 tweens because those targets are child elements of the "d1" DOM element. TweenMax.killChildTweensOf( document.getElementById("d1") ); _________________________________________________________________ killTweensOf() Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function. http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf() TweenMax.killTweensOf(myObject); TweenMax.killTweensOf(myObject, {opacity:true, x:true}); _________________________________________________________________ depending on what your trying to stop or in this case kill.. you could use any of the above GSAP methods to stop the animation also if you provide a codepen / jsfiddle example we can help you more specifically..

Awesome .. I missed that.. thanks again Carl..

thanks Carl.. i will test that out.. do you know if delayedCall() returns anything when used in a variable instance like setInterval() does ??

hello hello.. i know instead of using setInterval(), we can use delayedCall() for GSAP.. what would be the clearInterval() equivalent in GSAP. In setInterval() when you declare it in a variable, returns an ID (unique identifier) which is used in clearInterval() to cancel the timer var intervalID = window.setInterval(animate, 500); // later called to cancel the timer window.clearInterval(intervalID); so my question is.. what is the equivalent in GSAP to cancel a specific delayedCall() instances... since if i use killAll() //kill only delayedCalls TweenMax.killAll(false, false, true, false); it kills all delayed calls, but not just a specific delayedCall().. I could use killDelayedCallsTo() which kills all of the delayedCalls to a particular function.. but is there a method to kill specific instances of delayedCalls that might have multiple delayedCall() being used, like when using clearInterval? does delayedCall() return a unique identifier like setInterval() does to reference later for cancelling / killing? Below i can use the following to cancel timers at different times due to the instances referenced with the setInterval() .. var intervalID = window.setInterval(animate, 500), intervalID2 = window.setInterval(animate, 1000); // later called to cancel timer 1 window.clearInterval(intervalID); // called again later to cancel timer 2 window.clearInterval(intervalID2); so what would be the equivalent to cancelling the delayedCall() on different instances like above using setInterval().. instead of cancelling all tweens associated with a function that you pass to killDelayedCallsTo() ?let me know if i need to clarify more, and if the way im explaining my question is long winded?

Carl beat me to it yes you can have values of the duration like you described // (number in ms / 1000) 600ms = 0.6 2540ms = 2.54

you could create your own with canvas or use css and use GSAP to animate the element instead of css transitions.. or if you just want fast and simple you can use a regular animated gif from preloaders.net using GSAP you could make a simple bar preloader like this: var $box = $('div'); tl = new TimelineMax({paused:true}); tl.add ( TweenMax.to($box, 3, { ease: Linear.easeNone, onUpdateParams: ["{self}",$box], onUpdate: function(t,{ // gets the current timeline progress on each update var tlp = t.progress(); TweenMax.set(b,{scale:tlp}); } }), "mylabel" ); tl.play(0);

hello.. if I understand your question.. its always best whether your referencing an image for TweenLite or TimelineLite.. that the images be loaded first. In this case its best to use the window load event to make sure the images are fully loaded before trying to animate them. // native javascript way window.load = function(){ // tween code goes here }; // jQuery way $(window).on('load',function(){ // tween code goes here }); this guarantees that your images are loaded before you try to do anything with them... is that what you mean?

i updated my link so the elements animate out first and use the onComplete callback and then animate in http://codepen.io/jonathan/pen/BkbKq

there was also this.. but i just commented out the position absolute on the .grid > div and added float:left ... http://codepen.io/jonathan/pen/BkbKq but the grid system is still off when bringing in hidden items with already visible items so i added a onComplete on the tween that hides the items and then triggers a callback when complete and then tweens the items in http://api.greensock.com/js/com/greensock/core/Animation.html#eventCallback() I also made it so when the page loads, it triggers the first anchor tag "All" .. so all items will animate in when page first loads the GSAP docs have a lot of great info: http://api.greensock.com/js/ does that help at all?

Have you looked into using a grid plugin like jQuery Isotope, which is a really cool grid plugin: http://isotope.metafizzy.co/ Otherwise if your making your own.. you can try to first setup your grid with css and animate transforms using GSAP

ok.. i noticed you didnt answer any of the questions above.. but anyway.. the following tweens the display property http://codepen.io/jonathan/pen/qzoLn its best to bind your events externally instead of binding your events inline on the tag.. the codepen includes jQuery.. and i am using data attributes on the tag. Once the anchor tag is clicked the event triggers and it grabs the data attribute values to pass to the function also your .grid class had visibility hidden, so i commented it out... also you will notice how i set the initial display state with the GSAP set() method also you will notice that i also set the initial transform property in the css is this what you mean?

Hello and Welcome to The Forums.. Have you tried setting the #demo id to position:relative .. and then set its children div's position property to position:absolute.. which takes the element out of the document flow.. and then it will cause the cards to stack over each other.. and then you can keep them in the same position when animating in and out.. /* line 11 */ #demo { background-image: url("img/background_wood.jpg"); height: 250px; width: 300px; /* children will be relative to this parent #demo */ position: relative; } /* line 18 */ .portrait { float: left; height: 208px; width: 150px; margin-left: 60px; margin-right: 10px; /* children will now be out of the document flow and can stack */ position: absolute; } so instead of using floats and margins you can use positioning, and then you use the top and left property to position the element as you want.. and then you can use z-index to control stack order. alternatively, and much better would be to use transforms... like animating the x, y, and z properties instead of animating the positioning top and left properties http://www.greensock.com/css3/ http://www.greensock.com/gsap-js/ does this what you mean or want? and/or you can provide a codepen or jsfiddle and as example and we can help you a little better