Jonathan

I know I'm late to the party. But without context you will get 3 different answers to a very vague question that can give you 3 different answers. Now me personally would have not even replied with an answer when someone is using or conveying profanity in the forum towards people trying to help them. But like @Dipscom said above Club GreenSock has no relationship to the free GSAP support given here in this forum. The community members will help you out of the kindness of their hearts. So please lets be a little more civil, and in kind you will get users in the community who will go above an beyond to help you using their own private time. Happy Tweening

Keep in mind when using GSAP. Its best to use the GSAP set() method instead of the jQuery css() method. The reason being is that you will be changing CSS properties outside of GSAP. So this way GSAP can keep track of those CSS properties changed outside of itself by using the set() method. It will save you a lot of stress and hair pulling GSAP set() method: https://greensock.com/docs/TweenLite/static.set() Happy Tweening

What specific browsers and browser versions are you trying to target?

It is good to see a fellow smiley face around here. You have one up on me, since my avatar does not have any hands. But that's what mustaches are for.

Sorry, I know this thread is years old, but i had to respond to this rude "cultural thing". Complaining that someone ( @OSUblake ) didn't take their own personal free time to help them with an in depth, time consuming question, with not even a whiff of being thankful or understanding. How dare you Blake not respond later that night while still suffering the effects of Hurricane Irma? You will always get at least one person who expects they should be waited on like your their coding butler manservant. Don't worry Blake I'm sure there are plenty of users in the forum who are grateful for your help!

There are some online stores that actually charge the customer an extra fee if purchasing within Internet Explorer.

Hello @mrrobot993 and welcome to the GreenSock Forum! I don't see the codepen example your trying to reference. That codepen link just goes to the homepage of Codepen. Please include the code example so we can better help you. Happy Tweening!

Its always good to support any browser that hasn't reached its life cycle, so you can have your product work on any browser not put to death. Also IE11 was the highest Internet Explorer version you could get on Windows 7. Windows 7 is reaching its life cycle in another year. Internet Explorer (IE) 10 will reach its end of support on January 31, 2020. So that means IE11 will also reach the end of its life cycle some time after that. Here is Microsoft's list of their End of Cycle charts for Internet Explorer https://support.microsoft.com/en-us/help/17454/lifecycle-faq-internet-explorer

Hello @Jaexplorer and welcome to the GreenSock forum! The CSS calc() function is not even a CSS property that you animate, it is a computed equation value that gets parsed by the CSS parser in the browser like @Visual-Q advised above. So technically calc() is not a property that is animatable, since it is a function that is used as a value. And like @OSUblake advised the browser just reports the calculated value when requested by GSAP or any other JS property that accepts a <calc>, <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer>. Please see the CSS calc() spec: https://drafts.csswg.org/css-values-3/#calc-computed-value https://drafts.csswg.org/css-values-3/#calc-notation https://drafts.csswg.org/css-values-3/#calc-syntax https://drafts.csswg.org/css-values-3/#calc-type-checking Happy Tweening

Your probably looking for the onDrag function: https://greensock.com/docs/Utilities/Draggable onDrag: Function - a function that should be called every time the mouse (or touch) moves during the drag. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onDragScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent(last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc. Happy Tweening

That explains it.. That is why i asked above you if you were setting your initial CSS transforms outside of GSAP. In your case using the jQuery css() method. GSAP has no way of knowing when you set a transform outside of it, especially when using the jQuery css() method. That is why it is always better to set your transforms with GSAP like i advised above, so GSAP is kept in the loop of what your changing. So you don't change CSS your trying to animate oustside of GSAP. Happy Tweening

You should try setting the initial transform and perspective with GSAP. It will handle all the browser vendor prefixes if needed for each browser. And then will allow GSAP to record and keep track of your CSS transform changes. TweenMax.set(".drag_zone", {scale:1, x: "-50%", perspective: "600px"}); // then your other GSAP code goes here Also keep in mind that GSAP also has xPercent and yPercent instead of using x or y, for when you need to do a percentage based transform for translateX and translateY. xPercent and yPercent, percentage based transforms: https://greensock.com/gsap-1-13-1 https://codepen.io/GreenSock/pen/rAetx If your still having an issue please create a codepen demo example like I described above. Happy Tweening

Hello @ninmorfeo and Welcome to the GreenSock Forum! How are you setting your initial transform translate3d() ? Are you setting it with GSAP using a set() or are you doing it some other way in the CSS outside of GSAP? The reason being is you could be setting it outside of GSAP. But this will be hard to debug without seeing your code in context. But to better help you please create a limited codepen demo example so we can see your code live and in an editable environment. Happy Tweening

Hello @Duke3D and Welcome to the GreenSock Forum! This is more of general JS question related to event binding and listening of an element, than a GSAP API specific question. Now this could be done by just adding an addEventListener() on the load event for the element your checking if its loaded. But for my own uses, I have a little jQuery monitor element is loaded script i use to check if various elements are loaded. /* monitor if element is loaded (minified jquery plugin) */ (function($){jQuery.fn.monitor=function cb(callback){var set=this.first();var h=set.height();var w=set.width();var txt=set.text();var html=set.html();(function flux(){setTimeout(function(){var done=h==set.height()&&w==set.width()&&txt==set.text()&&html==set.html();if(done){if(jQuery.isFunction(callback))callback()}else{h=set.height();w=set.width();txt=set.text();html=set.html();flux()}},500)})()};})(jQuery); Its usage is like this /* run monitor check on element #BillVector */ $("#BillVector").monitor(function(){ // code to run when element is loaded console.log("#BillVector is loaded"); }); And here is your codepen with that Monitor Element Loaded jQuery script in it. You will see console log fire when #BillVector element is loaded. Check console for output: https://codepen.io/jonathan/pen/ydeJmp?editors=1111 Happy Tweening

That solution I advised on was just CSS and doesn't require animating since its already part of the overlay your already animating. Normally that type of thing would have to be done with an extra element and also having to animate that element in sync with your original overlay. Or adjusting the background offset like @Visual-Q advised above. But your issue was more of having to do with the setup of your layout. And Pseudo-Elements allow that flexibility of not having to create extra elements into the DOM since you wanted the overlay to have 2 background-colors. GSAP just simply animates that layout and or elements you already have marked up. Since GSAP can animate any element or object and allows you setup your html, svg, canvas, webgl, js object ... etc.. the way you want But glad you found it useful

Hello @Emilek1337 and Welcome to the GreenSock Forum! I have a different take on your question by just adding one CSS rule to your code. But lets answer one of your questions... You asked the following: Technically you can have 2 background colors on your element. This is done by using CSS pseudo-elements of ::before or ::after. The .img-overlay element has the pink color as its background, and the generated content of the ::after CSS will give that DeepSkyBlue as your 2nd background color. For example you can add the following CSS rule to your codepen .img-overlay::after. .img-overlay::after { content: ""; height: 50%; width: 100%; background-color: DeepSkyBlue; z-index: 99; position: absolute; left: 0; bottom: 0; top: auto; } Like this: https://codepen.io/jonathan/pen/bPdyQG Happy Tweening Resources: Pseudo-Elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements ::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before ::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Hello @JackIsJack44 and welcome to the GreenSock Forum! That doesn't work in Chrome due to the nesting of SVG element within another SVG element. You have to target your main parent <svg> #main and not its child nested <svg> #test. var t1 = new TimelineMax(); t1.to('#main', 2, {x:200,y:200}); https://codepen.io/jonathan/pen/agOrBJ Happy Tweening

You forgot about number 3 that @OSUblake advised which is: 3) add a new stacking context On what element you ask and how? .. That's a great question! If you create a limited codepen demo example we can see see how it can solve your issue when we see your code live and in an editable environment to better help you. Thanks and Happy Tweening

Hello @Adam Wright and Welcome to the GreenSock Forum! Here is a link to the TweenMax from() Docs: https://greensock.com/docs/TweenMax/static.from() So the from() method has 3 parameters.. specifically the target parameter: TweenMax.from( target, duration, vars ) The target parameter target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). So just like @Visual-Q advised jQuery is not required. But keep in mind if using the load event you want to stay away from the onload event and use addEventListener("load") instead, since the window.onload event can wipe out previously binded load events on the window object. Here is a quick way to make sure you only run your GSAP code after the window is fully loaded and the DOM is fully ready. Below you will see that I first make sure the DOM is ready, and then check if the window is loaded. This makes sure that the HTML or SVG markup is fully ready and that the window is checked within that DOM ready event handler. That is a great cross browser solution. The reason being is that sometimes the window event can fire before your DOM is ready or vice versa. That happens due to slow networks and connectivity. This makes sure that the window event fires, even if it it fires before or after the DOM is ready. So if the window load fires after the DOM ready.. it will fire as expected. If the window fires before the DOM is ready, it will wait and fire immediately after the DOM ready event. So this way you cover your bases The Vanilla JS way: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded window.addEventListener("load", function() { // GSAP custom code goes here }, false); }); The jQuery way: // wait until DOM is ready $(document).ready(function() { // wait until images, links, fonts, stylesheets, scripts, and other media assets are loaded $(window).bind("load", function() { // GSAP custom code goes here }); }); Happy Tweening

Hello @Jean-Tilapin and welcome to the GreenSock Forum! You will get faster replies if you please create a limited codepen demo example. Since it will be hard to help you without seeing your code live and in context. Here is a video tut on how to create a codepen demo example. Thanks

Yes @OSUblake is right the default z-index is auto. So in order to use z-index you must use either position (absolute, fixed, or relative), otherwise z-index will not be applied. z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Happy Tweening!

Hi @dee If the error is coming from custom.min.js on Line 118, you should go to that line number in that file. Then you can narrow down what triggered that error

Hello @superasn and Welcome to the GreenSock Forum! SplitText only splits up your text into lines, words, or letters. Then you animate those split text elements the way you want. In GSAP those type of preset effects are done with easing, specifically with GSAP CustomEase. CustomEase: https://greensock.com/docs/Easing/CustomEase You can see here in the below codepen examples of those easing presets, for example in CustomWiggle. https://codepen.io/GreenSock/pen/LRqkOr?editors=0010 Check out the Easing Docs on it CustomBounce:https://greensock.com/docs/Easing/CustomBounce CustomWiggle: https://greensock.com/docs/Easing/CustomWiggle Also check out this video tut on how to use it Happy Tweening!

Hello @danboyle8637 and welcome to the GreenSock Forum! Looks like your not waiting until your elements are ready in React. codesandbox probably has issues when reloading iframes which is what makes up those view panels in codesandbox . You might want to make sure you run your GSAP code once the DOM is fully ready. In vanilla javascript it is the DOMContentLoaded event, in jQuery its the ready() event. In React it is the componentDidMount and componentDidUpdate event listeners. This way you know the DOM has all your elements loaded and ready before trying to have GSAP access them. Happy tweening!

Hello @Elitzca and Welcome to the GreenSock Forum! Is there any reason why your not referencing this for the current node your hovering over? Then you wont have to specify that simple class selector targeting all elements with those classes. That will allow you to target this, which will be the element your currently hovering over. this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this You can see in the following codepen examples of running a loop to bind hover events to multiple elements. Then associating a timeline with each element and storing that timeline in the nodes properties to be accessed when hovering over each element. Even though the below examples use jQuery for the loop, the technique is the same for vanilla JavaScript. https://codepen.io/jonathan/pen/KdYqWo and this one too https://codepen.io/jonathan/pen/rOgVEd I also noticed your HTML markup is malformed. You have an <li> tag with no parent of <ul> or <ol> in your above HTML markup. So you have this: <li class="div-link"><a href="#">Order parts</a></li> It should be this with the <ul> or <ol>: <ul> <li class="div-link"><a href="#">Order parts</a></li> </ul> If you provide a limited codepen we will be more than happy to help you figure out what your trying to do. Here is a link to how to create a limited codepen demo example so we can test your code live. Happy Tweening!