Jonathan last won the day on August 6

Jonathan had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Jonathan last won the day on August 6

Jonathan had the most liked content!

Community Reputation

4,634 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,151 profile views
  1. Jonathan

    Animating SVG attribute, blur, very bar rendering

    When i inspect Chrome, GSAP is indeed interpolating values for the svg filter. But Chrome isn't rendering anything, oh Chromernet Explorer 6
  2. Jonathan

    timelineMax not working after resize

    Hello @AntonKeller and welcome to the GreenSock Forum! Glad you got it working
  3. Jonathan

    Animating SVG attribute, blur, very bar rendering

    It might be related to base64 images in Chrome which have various bugs when dealing with base64 images, along with being cross domain? So its probably related to some chrome shenanigans of them breaking things and then fixing them. Oh, and then them breaking it again.
  4. Jonathan

    Draw svg Issue with firefox

    Hello @zozo and welcome to the GreenSock Forum! The issue your seeing is happening because id #mask9 is a <line> element. It looks like your <line> element (#mask9) for the letter i, is causing this error to be thrown. You can see when i comment out the SVG <line> element (#mask9) and the from() tween for #mask9. The animation does not throw that error. I will shoot a message to the Mighty @Carl and Jack @GreenSock and see if they can see why that happens with that <line> element. Please standby
  5. Jonathan

    Performance issue on mobile

    Hello @mb2233 and welcome to the GreenSock forum! Yes i ditto what @PointC just posted. Your performance issues can be a number of things, like what CSS properties are you animating? What do your tweens look like? But we can know right away if you provide a reduced codpen demo example. This way we can test your code in a live editable environment and see what is happening. Also: what browser and browser version did you see this on? what mobile device? what OS and OS version did you see this on? Happy Tweening
  6. Jonathan

    SplitText and word wrap issues

    @Sahil that's weird.. I did notice that the first 3 codpens solved the box model layout fit of the text before and after the animation is reverted. But @Carlshowed me that once the nested div's are inserted and reverted, the "g" went back to the same line. My quirks mode has been a little buggy so i should have caught that sooner
  7. Jonathan

    Animation feGaussianBlur of clipped object

    Hello @Spacefuel and Welcome to the GreenSock forum! This will be hard to debug without seeing your code in a live editable environment like codepen. Can you please create a reduced codepen demo showing us your issue, so we can test it live? But below are examples of animating fegaussianblur using the GSAP AttrPlugin to animate the fegaussianblur svg attribute. Another example animating fegaussianblur And adding fegaussianblur on an image Happy Tweening!
  8. Jonathan

    SplitText and word wrap issues

    Another 5th option is to add the following: #message div { white-space: nowrap; } It looks like the child div tags of #message are inheriting the CSS white-space property (from the browser stylesheet), which has the white-space property default of normal which always wraps. Hope this helps Resources: CSS white-space property:
  9. Jonathan

    SplitText and word wrap issues

    Hello @Jimmi Heiserman To add to @Sahil great advise... This is a CSS issue and not a GSAP SplitText issue. GSAP is doing what its supposed to do. This is happening due to the CSS Box Model, specifically the red border (border: red solid 1px;) you have on your #message element. That border is adding to the fixed width of the content, that is why the letter "g" goes to the next line. So to fix this issue, you have 4 options: add the CSS box-sizing: border-box to your #message CSS rule or add CSS box-sizing: border-box to your GSAP code using the set() method or remove the border from the #message CSS rule or increase your CSS width by 2px , making it width: 99px to account for the border (border-left and border right) that is affecting the box-model You can solve this by just adding the CSS property box-sizing so it does not include the border in the box model: #message { box-sizing: border-box; } If you don't want to add to your CSS , then add the CSS box-sizing property in your tween with the set() method: TweenMax.set(element, {"box-sizing":"border-box"}); You see how its fixed by removing the red border fixing the box model. Using set() method to add box-sizing: Or adding box-sizing to your #message CSS rule Happy Tweening Resources: CSS Box Model: CSS box-sizing:
  10. Jonathan

    Is it me or... Firefox?

    Hello @Daniel Eytan Schneider and welcome to the GreenSock forum! When i debug your code in Firefox I can see that it throws an error in the file sketch-3.js on line 131. TypeError: d is null TweenLite.set(noodle, { scale: scaleNoodles, transformOrigin: "center center" }); It seems that noodle variable might be null or other properties based on that null variable can be throwing other TypeErrors. noodle is declared on line 125, so something is happening with that. var noodle = document.createElementNS("", 'path'); You might want to insert or append your created SVG element in the DOM before tweening or setting any CSS properties, that might be causing your issue. But unfortunately like @GreenSock Jack advised its very difficult to debug minified code and especially code that is massively long to debug on a live site. You should reduce your code bit by bit, so you can eliminate the problem parts. This way you can narrow down your issue. Firefox is very picky when it comes to creating elements with createElementNS(). So try commenting out all your code, and slowly un-comment out different parts so you can find the problem. Happy Tweening
  11. Jonathan

    Recreating an animated X with GSAP

    Hello @smallio The only way to animate CSS :before and :after pseudo elements is to use the GSAP CSSRulePlugin like @Sahil advised. Below is an example of using the GSAP CSSRulePlugin to animate pseudo elements that are basically generated content that is not actually in the DOM. Please see the CSSRulePlugin docs: Just keep in mind that when using the CSSRulePlugin you have to make sure you follow some guidelines: Only use the single colon syntax :before and :after. Do not use the new double syntax ::before and ::after Make sure that the CSS rule in your CSS is the same exact CSS rule used in your GSAP getRule() method so GSAP can find that same exact CSS rule in your stylesheet Happy Tweening
  12. Jonathan

    Fresh load behaves differently from cached load

    Hello @Rager and welcome to the GreenSock forum! Its always best to only run your animation when the DOM (HTML and or SVG markup is loaded and ready) and the window is fully loaded (images, links, fonts, stylesheets, js, and other media assets) Try this so you only run your GSAP code when DOM and Window is loaded and ready: // wait until DOM is ready (html and svg markup) document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, external JS, external stylesheets, fonts, links, and other media assets) window.addEventListener("load", function(event) { // makes sure it runs after last render tick window.requestAnimationFrame(function() { // GSAP custom code goes here }); }); }); Happy Tweening!
  13. Jonathan

    Is it me or... Firefox?

    Hi @pauljohnknight Here is a better way to detect if the browser is Firefox, It uses feature detection since using the useragent can be spoofed. var FF = !(window.mozInnerScreenX == null); if(FF) { // is firefox } else { // not firefox } Be careful with hiding the content like that Google will ding you for hiding content to increase ranking. But you will have to test and see what Google is doing in your case. Google still dings for using high values of text-indent. Do you have a limited codepen demo example? Since it will be hard to even see what your GSAP specific code is doing or what it looks like. Also i noticed you are using canvas on that page, so be careful since canvas can be a resource hog, especially on mobile draining your battery. Happy Tweening!
  14. Jonathan

    Just a question about set vs

    Hello @jesper.landberg, The reason you would use GSAP set() versus is so GSAP can keep track of what you are setting. If you use, than you are updating the DOM with a CSS style change on an element outside of GSAP. So in your case you can use the GSAP set method so GSAP can keep track of your CSS changes. Now that doesn't mean you have to use GSAP set(), but there are some benefit to using set() over Using is likely faster, but if it was me I would opt for GSAP being always in the loop on what CSS properties you change. Im sure others here might opt for one over the other. But you can test each one and see what works best for your project. But that is just my two cents, Happy Tweening
  15. Jonathan

    Animating not absolute positioned elements

    Hello @Mantvydas and welcome to the GreenSock Forum! You will get better performance animating position absolute elements versus position static or relative. This is due to the fact that when you animate the element it will be animated outside the flow of the document. That means that it wont have to calculate its surrounding elements in the DOM, since elements with position relative and static are still in the flow of the document. But its always best to animate with position absolute so when the element animates its surrounding elements wont need to be calculated, but sometimes a layout might not allow you to do so. Just my two cents, Happy Tweening Resources: CSS position: CSS layout positioning: CSS visual formatting model: