Jonathan

Hello .. it looks like you were adding a set() method to the timeline via the add() method: you had this: timeline1.add(TweenMax.set($("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 200, visibility: "hidden" })); ... if you remove the encapsulated add() method TweenMax.set($("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 200, visibility: "hidden" }); and/or doing this: timeline1.set($("#logo"), { backgroundImage: "url(http://s.cdpn.io/16327/logo_black.jpg)", height: "60px", width: "60px", position: "absolute", x: 0, y: 200, visibility: "hidden" }); try that out... Working Example: http://codepen.io/jonathan/pen/yhtHr also instead of using just visibility hidden or visible.. have you looked into the autoAlpha property? autoAlpha - the same thing as "opacity" except that when the value hits "0", the "visibility" property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, "visibility" will be set to "inherit". We don't set it to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); its a great way to show and hide elements.. its part of the CSSPlugin: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html hope this helps

Hello and Welcome to the GreenSock Forums! I think you forgot the URL link to the tutorial you are following? As far as seeing that error : Uncaught ReferenceError: TweenMax is not defined From what i see in the code you posted, it looks like you have 2 scripts TweenLite.min.js and TweenMax.min.js Basically it depends on what your using in GSAP. If your only using a limited amount of features and you are worried about file size you can use TweenLite and just add specific plugins as needed.. like the CSSPlugin, EasePack, etc.. TweenMax contains all those goodies like CSSPlugin, EasePack, etc so you just have to include one file Try removing the script tag for TweenMax.min.js or just keep that there and remove the TweenLite.min.js and CSSPlugin.min.js, EasePack.min.js scripts <script src="jquery-1.9.1.min.js"></script> <script src="TweenLite.min.js"></script> <script src="EasePack.min.js"></script> <script src="CSSPlugin.min.js"></script> <script src="main.js"></script> or do this <script src="jquery-1.9.1.min.js"></script> <script src="TweenMax.min.js"></script> <script src="main.js"></script> You can try to customize the scripts you need by clicking the get GSAP button in the top left sidebar above then pick your flavor, JavaScript underneath the textarea with the code snippet, click the radio button that displays Customize then the Customization panel with slide up and then select the radio buttons to the GSAP script you want to include in your web page or website then go to the textarea box and copy and paste the code snippets into your web page or website You can find out more info here in the GSAP DOCs: http://api.greensock.com/js/ http://api.greensock.com/js/com/greensock/TweenLite.html http://api.greensock.com/js/com/greensock/TweenMax.html http://api.greensock.com/js/com/greensock/TimelineLite.html http://api.greensock.com/js/com/greensock/TimelineMax.html hope this helps

Carl that short video explaining the issue.. was really super cool !!! It even helped me understand what was going on since, im new to superscrollorama.. thx

ok hopefully that alternate solution works! but is their a reason why you cant just get the width of the slide, and then animate positive left, and/or animate negative left depending on the slide ?? is the only direction the slides moving in is on the X axis.. basically moving east and west? is there a way to setup a limited codepen or jsfiddle so we can see how the slides are animating?

Hello and Welcome to the GreenSock Forum Is there a way you can just post limited code example via codepen or jsfiddle.. like your GSAP timeline code so we can see it in context to better help you? thx

when concatenating you don't need to escape the quotes in the beginning or end of your variable: buttonBritney.addEventListener("click", function() { callSlideIndex = 0; var leftPercentage = (callSlideIndex - currentSlideIndex) * 100; // try this - just the variable and your concatenated string TweenLite.to(slideContainer, 2, {left: leftPercentage + "%"}); currentSlideIndex = 0; }, false); to test if the number is negative you can check using this: // check if number is negative if(number < 0) // number is negative } is that what you mean ? http://www.quirksmode.org/js/strings.html

im getting a 404 error page on that link as well ...

Regarding not so sharp, jaggy or strange border rendering on Firefox Mac... Have you tried this one Firefox hack to help smooth edges on elements with transforms: Smooth Edges on Elements with Transforms: EXAMPLE - Open in Firefox: http://codepen.io/jonathan/pen/smvwb It used to fix the striped border bug in Opera, but i have seen it help smooth border edges in Firefox .. please try this: adding a border or/and outline property to transparent on the transformed element: #elementWithTransform { border: 1px solid transparent; } also you can try also setting the outline property to transparent as well.. i have seen this hack work on Firefox Mobile version: #elementWithTransform { outline: 1px solid transparent; } ... and to be safe you can set both CSS properties.. border and outline: #elementWithTransform { border: 1px solid transparent; outline: 1px solid transparent; } see if that helps? the browser will probably convert transparent to rgba(0,0,0,0) but thats ok UPDATE: also here are a couple bug reports from Mozilla: Bug 594380 - Boxes become jagged when using CSS transition to rotate them https://bugzilla.mozilla.org/show_bug.cgi?id=594380 Bug 593792 - moz-transition rendering with Glitches/Artifacts on accelerated Layers https://bugzilla.mozilla.org/show_bug.cgi?id=593792

Hello.. im kind of confused what your trying to achieve. Is there a way to provide a codepen or jsfiddle example to better see what your issue is in context with JS, CSS, and HTML ?? thx

if you need to target only for Firefox MAC using JS object detection: // check if Firefox var isFF = !(window.mozInnerScreenX == null); // get navigator platform "MacPPC" or "MacIntel" var platform = navigator.platform; if(isFF){ if(platform === "MacPPC" || platform === "MacIntel"){ // is Firefox MAC version } } https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID.platform http://dev.w3.org/html5/spec-preview/system-state-and-capabilities.html#the-navigator-object

Regarding issue 2 .. transformed elements stop being clickable... maybe its a Z axis browser bug ? Looks like Google Chrome webkit has this same bug as Firefox Mac version.. as far as an element losing its click-ability when an element is transformed in the Z axis.. ive noticed this same behavior in Chrome webkit over the past couple of years. i set up 2 test examples to show you what happens in Chrome when an elements child has been translated in the Z axis Go to Chrome browser and click on both red and green squares. ( you will notice that only the green box throws an alert, clicker_2 ) http://codepen.io/jonathan/pen/uGImANow go to this example in Chrome browser. ( you will notice that both red and green boxes are click-able now and throw the alert ) http://codepen.io/jonathan/pen/JLrzD Basically you have to compensate for the negative Z axis, so the child div was translated on the Z axis -50px... so i had to translate its parent div 50px on the Z axis to make it click-able again I have seen this behavior in various jQuery plugins that try to translate in the Z axis in Chrome Just thought i might point that Google Chrome (webkit) has tons of bugs that relate to translateZ or also if translate3D - 3rd parameter Z i wonder if this behavior exists if using scale Z or rotate Z ?? the translate Z behavior of not allowing clicks also happens on Android stock browser and mobile Chrome..

Hello.. usually the default CSS position of a table cell (td) is static.. are you setting your table cells initial position to relative in your CSS? do you have a jsfiddle or codepen example so we see your code in action and how it is behaving in the browser.. thanks

No worries.. there are alot of great people here that are willing to help! just bookmark the GSAP Doc's and keep them handy http://api.greensock.com/js/ http://api.greensock.com/js/com/greensock/TweenLite.html http://api.greensock.com/js/com/greensock/TweenMax.html http://api.greensock.com/js/com/greensock/TimelineLite.html http://api.greensock.com/js/com/greensock/TimelineMax.html http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html http://api.greensock.com/js/com/greensock/plugins/AttrPlugin.html http://api.greensock.com/js/com/greensock/utils/package-detail.html http://api.greensock.com/js/com/greensock/plugins/package-detail.html

thanks for the explanation.. try this: http://codepen.io/jonathan/pen/ekdmb i added a special property, paused:true to the new TimelineMax instance: http://api.greensock.com/js/com/greensock/TimelineMax.html ballTm = new TimelineMax({paused:true}), and then added a play() within the ballMove() function ballMove(ballFinishingPositionX, ballFinishingPositionY) { ballTm.fromTo(football, 2, {left:342, top:473}, {left:ballFinishingPositionX, top:ballFinishingPositionY, ease:Linear.easeNone}); // added play(0) ballTm.play(0); } does that help?

Thank you.. to be more specific what is the name of the function that is getting called after the fact?

hello.. i get this error in the console when i go to your site: SyntaxError: missing } after function body http://polypodhub.com/qi/js/jquery-ui-1.10.3.custom.min.js Line 7 also this: "NetworkError: 404 Not Found - http://polypodhub.com/qi/images/bottomBackground.png.png"

Hello, I tried to go to your codepen... but in your code pen you might have to use another reference to TweenMax since the console is throwing an error about Tweenmax being undefined in Firefox: ReferenceError: TimelineMax is not defined (138 out of range 41) you can use this script in your JS external source: http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.1/TweenMax.min.js

just to understand what your trying to achieve.. is the actual divs having their order in the DOM changed? .. or is just the z-index being changed to adjust the stacking order of the div's? but like Rodrigo said if you are using jQuery Draggable, i would opt to use GSAP Draggable which is a great utility. And has support for z-index boost: http://api.greensock.com/js/com/greensock/utils/Draggable.html if you are set at using jQuery Draggable.. jQuery Draggable has a property for z-index and stack http://api.jqueryui.com/draggable/#option-zIndex http://api.jqueryui.com/draggable/#option-stack also the jQuery css() method has function allows you to pass a function as the property value: var $area = $(".area"), count = $area.length; $area.css("zIndex", function (i) { return count - i; }); http://api.jquery.com/css/

thanks for the example Krisztian.. does it still show black even if you add the below to your img: .anim1 > img, .anim2 > img { background-color:transparent; } or .anim1 > img, .anim2 > img { background-color:none; } also when saving the png images .. are you saving them in Photoshop or Fireworks, or other image editor? i am showing that the image imac1.png is a png-32. Does this still happen if you use a png-24 or png-8?I know that when an image is saved as a png-24 with transparency in Photoshop, that Photoshop will actually save the image as a PNG-32. I have sometimes seen depending on how the PNG or GIF was saved or copied, it would cause that type of black background where the transparency should be in Firefox on Mac. Copying image with transparency gives black background. Mozilla has a bug report regarding PNG alpha issues: https://bugzilla.mozilla.org/show_bug.cgi?id=249032 https://bugzilla.mozilla.org/show_bug.cgi?id=342481 https://bugzilla.mozilla.org/show_bug.cgi?id=264154 http://forums.mozillazine.org/viewtopic.php?f=38&t=366485&start=0&st=0&sk=t&sd=a https://bugzilla.mozilla.org/show_bug.cgi?id=460969 https://bugzilla.mozilla.org/show_bug.cgi?id=722555#c30 it doesnt look like a GSAP issue but a possible PNG display issue either in Firefox 25 for Mac or some other Firefox Bug: have you seen this issue with Firefox 24 Mac?Im not seeing this issue on Mac OS X 10.6.. what version of MAC are you seeing this on?

Hello, and Welcome to the GreenSock Forums! just to clarify.. you're only seeing this issue in latest Firefox 25 on MAC ? regarding issue #1: is the image being used uploaded via the wordpress media uploader or is the image/png just on the page as a static image and not being pulled from wordpress? (the reason i ask is that wordpress sometimes has an issue with png24 images when uploaded via the wordpress media uploader and sometimes causes png images to have that black background issue) does the issue still happen if you are animating the png/image parent.. like say its parent div? regarding issue #2: if you add pointer-events:none; on .slotholder does it allow the click through? .slotholder { pointer-events:none; } what styles and/or transforms are you seeing on the iframe when its not clickable?? note: Slider Revolution is an awesome slider

have you tried setting a global this variable? basically you can setup a global $card variable and a click event. .. Every time .card is clicked, the $card variable will be set to the current .card element var $card = $(".card:first"); $("body").bind("click", ".card", function(){ $card = $(this); return false; }); // use $card instead of card variable in the to() target var tweenLeft = new TweenLite.to($card, 1, { rotationY: '-=180', transformStyle:"preserve-3d",ease:Back.easeOut,perspectiveOrigin:'50% 50% 0px', paused:true, onComplete:function(){}}); var tweenRight = new TweenLite.to($card, 1, { rotationY: '+=180', transformStyle:"preserve-3d",ease:Back.easeOut,perspectiveOrigin:'50% 50% 0px', paused:true, onComplete:function(){}}); // draggable code goes here I noticed your example only had one .card element... so i couldn't really see what your trying to achieve.. also you could try placing your Tweens inside your draggable events. Is it possible to add another .card element to your jsfiddle so we can see more what your trying to do when multiple .card elements are on the page and dragged thx

Hello.. im trying to understand what your trying to do.. i see that you are using a class as your target element, which would target all elements with that class. You might have to pass a this reference to it so it only targets that specific .card element is it possible to create a reduced example codepen or jsfiddle of your issue so we can better see the exact issue your having? http://codepen.io/pen/ http://jsfiddle.net thx

if you go to the below link, you can see a nice example on using GSAP with canvas.. how it animates canvas objects and properties you might have to scrub the video to get to the canvas part, its about 16 minutes and 22 seconds in the video http://gotoandlearn.com/play.php?id=161

ok quick question.. As an example are you talking about 3d planes like this? (even though this example shows rotating in Z) http://www.html5canvastutorials.com/three/html5-canvas-webgl-plane-with-three-js/ And are you going to be using any canvas library like EaselJS, KineticJS, or Raphael and have GSAP animate the canvas properties and objects? http://api.greensock.com/js/com/greensock/plugins/EaselPlugin.html http://api.greensock.com/js/com/greensock/plugins/KineticPlugin.html http://api.greensock.com/js/com/greensock/plugins/RaphaelPlugin.html Or creating this in straight canvas without a canvas library and have GSAP animate the canvas objects and properties?

Hello, try this, you have to use the onComplete callback special property in your to() method: TweenMax.to($('html'), 1.5, {'scrollTop':$target.offset().top, 'scrollLeft':$target.offset().left, ease:Quart.easeOut, // onComplete callback goes here onComplete: function(){ window.location.hash = target; scrolling = false; } }); or you could call the function name itself TweenMax.to($('html'), 1.5, {'scrollTop':$target.offset().top, 'scrollLeft':$target.offset().left, ease:Quart.easeOut, // onComplete callback goes here onComplete: myFunction }); function myFunction(){ window.location.hash = target; scrolling = false; } found in the GSAP DOC's here: http://api.greensock.com/js/ http://api.greensock.com/js/com/greensock/TweenMax.html different callbacks: onComplete : Function - A function that should be called when the tween has completed onStart : Function - A function that should be called when the tween begins (when its time changes from 0 to some other value which can happen more than once if the tween is restarted multiple times). onUpdate : Function - A function that should be called every time the tween updates (on every frame while the tween is active) onReverseComplete : Function - A function that should be called when the tween has reached its beginning again from the reverse direction. For example, if reverse() is called the tween will move back towards its beginning and when its time reaches 0, onReverseComplete will be called. This can also happen if the tween is placed in a TimelineLite or TimelineMax instance that gets reversed and plays the tween backwards to (or past) the beginning. onRepeat : Function - A function that should be called each time the tween repeats