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,901 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

21,913 profile views
  1. Jonathan

    Variable for background position

    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!
  2. Jonathan

    CSSRulePlugin not longer works

    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. Let us know if you still see that error in Safari and it doesn't work? Thanks
  3. Jonathan

    Stop Hover animation after Click

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

    Small scaling font blurry

    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; Happy Tweening
  5. Jonathan

    WordPress 5 integration

    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', '', 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
  6. Jonathan

    WordPress 5 integration

    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', '', array(), false, true ); wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/wp-content/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: For easy reference: Happy Tweening!
  7. Jonathan

    Various questions not answered by the tutorials

    Its the name of the codepen @OSUblake posted above.
  8. Jonathan

    Various questions not answered by the tutorials

    Also tested the PixiJS Displacement Filter codepen and it to is 60fps in Chrome.
  9. Jonathan

    Various questions not answered by the tutorials

    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 or you can use SnapSVG 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?
  10. Jonathan

    Various questions not answered by the tutorials

    @David Spector Be careful because the browser will not run JS right when auto-updating in the background, until a restart which i have a had that happen to me plenty of times in Firefox and Chrome browsers since they like to auto update in the background causing mayhem. That is what jank, jagginess, jitterness or jerkiness means.. it means lost frames or you could also say skipped frames when the frame rate drops. Since having all the frames there would make a smooth animation. Check out Google's Paul Lewis regarding Render Performance and jank. I did not see any jank in Firefox (65.0 (64-bit)) after adding the slight rotation on latest Windows 10. or in Chrome (Version 69.0.3497.100 (Official Build) (64-bit)) or in Chrome (Version 72.0.3626.81 (Official Build) (64-bit)) with or without the slight rotation on latest Windows 10. Also keep in mind that Chrome is notorious for releasing updates that break how elements get rendered in CSS. In those cases we try and submit bug report tickets to have the Google Chrome Dev Team fix their bug. Since they have a habit of changing how CSS transforms render making it very inconsistent in how it renders and animates in each released Chrome version.
  11. Jonathan

    Various questions not answered by the tutorials

    Hi @David Spector, Regarding question #2 in your second reply I did not see any jank in Chrome testing on Windows 10. That jagginess jank (lost frames) happens in Firefox due to a Firefox bug when translating elements in x or y (translateX and translateY). To get around that you have to add a slight rotation 0.01 to force Firefox to render on a sub-pixel level. But that is a Firefox known bug and not GSAP. You can see now it does not have jank with the slight rotation 0.01. Happy Tweening
  12. Hi @marcelf and welcome to the GreenSock Forum! Like @OSUblake advised nesting fixed elements is not good. But sometimes you have to work around existing bad markup and styles from a CMS or template you didn't build. But there is good news since you can work around such things with just some minor tweaks to your CSS. You can fix this by adding the following CSS. .wrapper_relative { position: static; } .wrapper_relative > .wrapper_relative { position: relative; } The position: static makes sure that the top parent is in the flow of the document. And allows its first child has position: relative so your nested fixed element can be positioned relative to its first parent to allow the knob to rotate properly. Happy Tweening
  13. Jonathan

    ScrollToPlugin won't scroll divs or body etc.

    Hello @Tazintosh and Welcome to the GreenSock Forum! Sorry for any confusion. The reason it wont work properly with <body> element but with window. Is because in the docs the <body> tag is not a container. The body element tag is like your canvas, it is like your piece of paper that your drawing on.. It is your clean slate that you add to. Chrome and Firefox wont scroll the <body> for the main scrollbar because the window is what your main scrollbars are attached to. In order for it to work on the <body> you have to do like @Carl advised and use the <html> element instead. The window is what holds your HTML document, that is why it scrolls with the <html> element. But its best practice to use window or html element, unless you need a container like a div tag or other element within the body tag to scroll. But this is not a GSAP bug but how browsers work with scrolling the window object or the html element. The body tag can be buggy which is why Chrome and Firefox block that type of scroll. There are ways to force it to use body tag, like adding height: 100% on both <html> and <body> tags, but you will just get cross browser mayhem if you do so. Happy Tweening
  14. Jonathan

    Two animations, one object

    Hi @Nikki Dean Your second codepen shows a 404. There would be a number of ways to do this. But to just add to what you have without changing your code. You can just add a class called active when you click the magnifying glass. And then remove the active class when you click the X to reverse. Then just add a CSS class to force the rotation back to 0 so any hover will not be applied. JS I modified: search.addEventListener('click', function(){ search.classList.add("active"); // added this to add .active class; }) searchExit.addEventListener('click', function(){ search.classList.remove("active"); // added this to remove .active class toggleSearch.reverse(); }) The CSS I modified: /* force transform rotate to 0 */ { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) !important; transform: matrix(1, 0, 0, 1, 0, 0) !important; } There are other ways to modify the way your doing the hover, I'm but glad you got it fixed. Happy Tweening
  15. Jonathan

    Two animations, one object

    Hi @Nikki Dean and welcome to the GreenSock Forum! Are you using a child timeline within a master timeline? What do your tweens or timeline look like? To better help you can you please create a reduced codepen demo example. This way we can test your code live to see what is happening in an editable environment. As well as understand what is visually happening. Thanks and Happy Tweening!