Jump to content

Jonathan last won the day on January 23

Jonathan had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Jonathan last won the day on January 23

Jonathan had the most liked content!

Community Reputation

4,970 Superhero


About Jonathan

  • Rank
    Super Moderator

Contact Methods

Profile Information

  • Gender
  • Location
    United States
  • Interests
    Traditional Animation, Computer Animation, Drawing, DJing, Mycology, Traditional Chinese Medicine, and Herbalism

Recent Profile Visitors

22,110 profile views
  1. 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!
  2. 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
  3. Hi @OxXxigen and Welcome to the GreenSock Forum! You can also use the removeCallback() method https://greensock.com/docs/TimelineMax/removeCallBack() Happy Tweening!
  4. 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
  5. 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
  6. Hello @oligsap and Welcome to the GreenSock forum! When the Google bot scans your page for the first time, it reads the source text 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
  7. 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
  8. 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
  9. Jonathan

    New Safari Bug

    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
  10. Jonathan

    3D slider

    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
  11. 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
  12. 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!
  13. 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!
  14. Jonathan


    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!