Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Jonathan last won the day on June 18 2019

Jonathan had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Jonathan

  1. 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
  2. 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!
  3. 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
  4. Hi @OxXxigen and Welcome to the GreenSock Forum! You can also use the removeCallback() method https://greensock.com/docs/TimelineMax/removeCallBack() Happy Tweening!
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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!
  14. 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!
  15. 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!
  16. 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!
  17. 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
  18. Hi @belmuseri and Welcome to the GreenSock Forum. If you need to make it so once the 3 lines icon is clicked and no longer clickable. Just add an active class and check for that active class. If the active class exists, return false on the event handler. document.getElementById('navbar-toggle').onclick = function(){ if(menubcg .classList.contains("active")){ // do nothing return false; } else { menubcg.classList.add("active"); MenuIcon.reversed() ? MenuIcon.play() : MenuIcon.reverse(); } }; This is how I would do it, no need to use kill(), since the animation will not be triggered by the event. You could also remove the event listener like @PointC advised which is another option. But there are many ways to do this. Happy Tweening
  19. Hi @poohbear This might not help your situation. But you have a typo in your CSS for that above codepen. You have transformStyle:"preserve-3d" but it should be transform-style: preserve-3d; https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style Happy Tweening
  20. Keep in mind that if you have your custom GSAP script inside your child theme directory, then you have to use the below code instead: Reason being is that get_template_directory_uri() returns the path to your parent theme get_stylesheet_directory_uri() returns the path to your child theme <?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_stylesheet_directory_uri() . '/js/custom-gsap-scripts.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); ?> /js/ being the js folder in your child theme. Happy Tweening
  21. Hi @Gianluca Giurlando and welcome to the GreeenSock Forum! Yes that is still valid. On the frontend of your website, check the browser dev tools Network panel and make sure your GSAP CDN script is being run/loaded before your custom GSAP script JS file. This way your custom code runs after GSAP is already loaded Also you might have to add a DOM ready event and window load event to make sure your code is running when the HTML markup (DOM) and window is fully loaded. // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM loaded"); // wait until images, links, fonts, stylesheets, and js is loaded window.addEventListener("load", function(e) { // custom GSAP code goes here console.log("window loaded"); }, false); }); Check your dev tools console to make sure you see those output console logs. <?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' ); ?> The link to the WordPress Codex for enqueuing JS files: http://codex.wordpress.org/Function_Reference/wp_enqueue_script For easy reference: Happy Tweening!
  22. Its the name of the codepen @OSUblake posted above.
  23. Also tested the PixiJS Displacement Filter codepen and it to is 60fps in Chrome.
  24. I was talking about what you just experienced with this reply that after the Chrome update you didnt see any dropped frames. Chrome and Firefox have issues when doing an auto-update for the browser in the background process on your PC that will cause frontend issues in loading or running JS until after you do a restart of the browser, especially being worse in Firefox. That is still lost frames or jank, since its a frame drop. But I'm not go back in forth over semantics. That is just the word people use to describe an animation that is not smooth or has a drop in its frame rate, but you can call it whatever you want Regarding creating SVG shapes on the fly you can use what @Shaun Gorneau already posted using SVG.js https://svgjs.com or you can use SnapSVG http://snapsvg.io/. GSAP at its core can animate any javascript property or object, or CSS numerical property. GSAP wont programmatically create SVG elements for you, that is where SnapSVG or SVG.js comes in. But once you create the element with JS or with a JS SVG library you can use GSAP to animate it. Just tested my forked codepen I forked from your codepen you provided in Chorme 72 using the Dev Tools FPS counter and i see 60fps. So im not sure what your seeing?