Jonathan

HI again @Gezmins, I don't really use Google Web Designer but I have seen this sort of thing before. So what it looks like is happening is that .gwd-page-content has a transform with matrix3d() and perspective() which gives it a higher stacking context than your gwd-taparea. Some have solved this Firefox bug, by adding transform-style: flat on the .gwd-page-content element. But then I'm not sure if that will fully adjust the stacking context since transform-style flat will fallback to transform 2D and not transform 3D. Also keep in mind that when you use position absolute you should always specify your z-index so you tell the browser how to stack those absolutely positioned elements. I think that is another reason why the stacking context is not stacking right since z-index default is auto which can be a wild west scenario with inconsistent render results. I believe the lack of z-index and other things is causing Firefox to get confused on the stacking context. I would make sure that your gwd-taparea element has a higher z-index than the #background and #footer-ctn. If your element does not need absolute position then just use position relative which will allow you use z-index and so your element stays in the flow of the document. What happens if you add the following CSS to your gwd-taparea so it gives it a new stacking context? gwd-taparea.gwd-taparea-1uz5 { -webkit-transform: translateZ(0px); transform: translateZ(0px); } Happy Tweening

Just as @GreenSock (Jack) had said above you should try to clean up your high amount of precision numbers of your SVG children. Check out this below link, its an online SVG clean up tool (don't forget to toggle off Clean ID's if it gets set to on) https://jakearchibald.github.io/svgomg/

Hello @Gezmins and Welcome to the GreenSock forum! Usually that happens due to a stacking context issue. Are you sure that it is not related to this Firefox bug report? https://bugzilla.mozilla.org/show_bug.cgi?id=729625 Sometimes you can add transform: translateZ(0px) to your hit area to resolve this so it gains a new stacking context so its clickable. And / or even adding transform-style: flat to the .gwd-page-content selector. But do you have any of your html and css code to post for context? Happy Tweening!

Hello @marko krstic and Welcome to the GreenSock Forum! You can also add your selector string right in your tween target, since GSAP uses querySelectorAll() for the target parameter. This way jQuery isnt required, like this: .from("#bottomLogo", 1, {opacity: 0, y: '200%'}, "-=1") from() Docs: https://greensock.com/docs/TimelineMax/from() .from( target, duration, vars, position) 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(). Happy Tweening!

Hi @Anand Makhija and Welcome to the GreenSock forum! Based on the link you provided i cant see a slider in latest Firefox. I see it load in Chrome, but very very slowly. GSAP can accomplish that slider in that link you provided above. That looks like a fullscreen slider, with some hover and parallax effects. The tracking effect of the mousemove mouse cursor is a little off putting since there is a weird delay that almost feels like its not tracking correctly. Do you have any specific questions about how to use the GSAP API? .. if you do we are more than happy to help you! Happy Tweening!

Hi @Killerwork and Welcome to the GreenSock forum! To add to all the above great advice. I would second on SVG being a CPU hog, since SVG cannot take advantage of the GPU (your graphics card) to animate. That is why you will see that CPU spike even more on mobile. You can also look into the HTML5 Intersection Observer API to try and detect when your elements are outside or inside the viewport. This way you only animate when your elements are inside the viewport. IntersectionObserver API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API You can also checkout the HTML5 Page Visibility API to detect when a user gives focus to another tab so you pause your animations when the browser tab of your animation is not active. Check out this codepen example of the Page Visibility API with GSAP : https://codepen.io/jonathan/pen/sxgJl Page Visibility API: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API Happy Tweening

Yeah, visibility: hidden should have worked. Do you have a current codepen of this so we can see your code in action and in a live editable environment? @mikel has visibility: hidden in his codepen assigned to the class .hidden and it is working there.

Hello @waschbaer__ and Welcome to the GreenSock Forum! Keep in mind that anytime you use any type of from() tween, that the immediateRender special property is defaulted to true. So you will need to add immediateRender: false if you see that visible before the animation triggers. immediateRender: Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, setimmediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true. That goes for all from tweens from() fromTo() staggerFrom() staggerFromTo() Since your animating opacity (autoAlpha), you can also add visibility: hidden to your elements css so also dont have your item visible on load. The autoAlpha special property will automatically toggle visibility property to visible before animating opacity to 1. Resources: fromTo(): https://greensock.com/docs/TweenMax/static.fromTo() CSSPlugin autoAlpha: https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha Happy Tweening

Hello Fellow GreenSockers, @GreenSock (Jack) has made a new Learning page. Over the years Jack has "whipped together" various GSAP-related helper functions for community members, so we gathered them into one place for convenience. Enjoy! https://greensock.com/docs/HelperFunctions That's it for now, but we'll keep adding relevant helper functions here as we craft them. Happy Tweening!

Nice detective work Jack

Chrome did add a built in lazy load for images below the fold of the viewport months ago. I wonder if those new versions is causing a conflict or that buggy re-loading of images. Which would not surprise me based on Chromes track record with not being consistent about features and those features consistent behavior. Based on that lazy load feature in Chrome there have been reports that users with intermittent network connections, images may fail to load when scrolling down the page or trigger a reload. Hopefully they work it out. But you can always submit a bug report to Chrome Developers and see if they can fix your issue. They are pretty good (sometimes) on fixes their bugs. Happy Tweening

Hi @OxXxigen and Welcome to the GreenSock Forum! You can also use the removeCallback() method https://greensock.com/docs/TimelineMax/removeCallBack() Happy Tweening!

Hello @Manikandan Jeyaraman and Welocme to the GreenSock forum! All you have to do is enqueue the GSAP script like @Dipscom advised. Please add the below code to your WordPress themes functions.php. <?php // The proper way to enqueue GSAP script // wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); function theme_gsap_script() { wp_enqueue_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js', array(), false, true ); wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); ?> Resource: WordPress Codex for enqueuing JS files: http://codex.wordpress.org/Function_Reference/wp_enqueue_script Happy Tweening

Hello @vektor and Welcome to GreenSock Forum! If your seeing render issues with SVG origin, can you please let us know the following: What Browser and Browser version? What OS and OS version? Thank you for any additional info you can provide. But you can also make it so you only run your animation when the DOM is ready and the window is fully loaded. So your code only runs when all web assets and markup have been fully ready and loaded. // wait until DOM is ready (html and svg) document.addEventListener("DOMContentLoaded", function(event) { // wait until window is fully loaded (css, js, fonts, links, and other media assets) window.addEventListener("load", function(event) { // GSAP custom code goes here }, false); }); Happy Tweening

Hello @oligsap and Welcome to the GreenSock forum! When the Google bot scans your page for the first time, it reads the source code of the HTML document. So it will read the <h1> text before the JavaScript has generated the new HTML <h1> markup. You can also test your web page using Google web tools like Google PageSpeed Insights and Google Webmaster Tools. Hope that helps

Hi GSAP indeed does use RAF under the hood so there is no need to do that. Feel free to ask any more questions. Happy Tweening

Hi @gregor Keep in mind when debugging your code using the browser Dev Tools. Chrome and Firefox developers insist that when using dev tools and testing performance, that you must be in incognito or private browsing mode. Since if you are in those modes you can have skewed results due to extensions and other memory leaks. So when testing performance, make sure your in either incognito or private browsing mode so you make sure all extensions are disabled along with cookie and storage. Just my friendly two cents

Hi, Can you be more specific on what is the behavior you see when it breaks in Safari? Also keep in mind that CSS clip-path still shows partial support with prefix -webkit for Chrome and Safari https://caniuse.com/#search=clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path Any Additional info will be appreciated

Hi @Catalin R. and Welcome to the GreenSock Forum! Here are 2 examples of 3d carousel made with GSAP with navigation https://codepen.io/jonathan/pen/YwVadY no navigation https://codepen.io/jonathan/pen/KVmpOG Happy Tweening

Hello @gregor and Welcome to the GreenSock Forum! Can you please create a limited codepen example so we can see your code in action to better see what your seeing? This way we can better help you! Happy Tweening

Hello @jimmylet and welcome to the GreenSock forum! Yes a cool effect indeed, i will take a crack. Based on inspecting that page. It has the main image that is stacked on the bottom. Then a <canvas> tag is stacked above the main image with an opaque blur that is either a transparent blur or it's a canvas sample copy of the main image with an added blur effect. So basically 2 layers stacked, of the main image on the bottom and the blurred canvas image on top. Then mouse movements are detected when hovering over the canvas image to reveal a paintbrush mask that allows full transparency so you see through the <canvas> tag and see the main image underneath. That is what i got from inspecting that slider. I only saw the effect work in Chrome, but Firefox and MS edge did not show the slider for some reason, only Chrome did. Happy Tweening!

Hello @dadoumda and Welcome to the GreenSock forum! Any reason why your trying to use getDisplayDocument() ?? I only see that with use of https://www.trivantis.com/ For jQuery you have to do the following: // define selector for simple selectors to work with GSAP TweenLite.selector = jQuery; GSAP under the hood already uses document.querySelectorAll() by default. See: https://greensock.com/docs/TweenMax/static.selector If your still having issue please create a reduced codepen demo example Happy Tweening!

Hi @miks ans Welcome to the GreenSock forum! NS stands for NameSpace. This can happen if a SVG element is either missing, has display:none or is not visible. It will throw that NS_ERROR_FAILURE, since any element that is missing, has display:none or hidden will be removed from the render tree making it throw that error since it does not exist. Firefox is following the SVG spec in this regard! That is why i always develop in Firefox first, since Firefox will always follow the spec, versus webkit based browsers like Safari and Chrome which allow this wild west non-standard behavior. Here is a reference regarding the SVG display behavior: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display And it is also stated in the W3C spec for SVG 1.1 https://www.w3.org/TR/SVG11/painting.html#DisplayProperty A value of display: none indicates that the given element and its children shall not be rendered directly (i.e., those elements are not present in the rendering tree). Any value other than none or inherit indicates that the given element shall be rendered by the SVG user agent. Here is a list of Firefox Error Codes: https://developer.mozilla.org/en-US/docs/Mozilla/Errors NS_ERROR_FAILURE (0x80004005) This is the most general of all the errors and occurs for all errors for which a more specific error code does not apply. So just make sure when targeting SVG elements that use display: none, that they are not directly rendered in the rendering tree. So they won't exist as far as the SVG spec is concerned. Please also see Happy Tweening!

Hello @DevSaver and welcome to the GreenSock Forum! The plus sign (+) concatenates (joins) the string and the variable. var myVariable = "left"; TweenMax.set(item, {backgroundPosition: "center " + myVariable}); Happy Tweening!

Hi @rafaguilar Just to make sure that this is a Codepen issue VS a GSAP issue. Can you please test the below codepen link in Safai and see if it still throws that error. The reason being is that codepen runs in an iframe but when you change in the codepen URL /pen/ to /dug/ it runs the codpen without an iframe. https://codepen.io/GreenSock/debug/atgzI Let us know if you still see that error in Safari and it doesn't work? Thanks