Jonathan last won the day on January 8

Jonathan had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Jonathan last won the day on January 8

Jonathan had the most liked content!

Community Reputation

4,846 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,701 profile views
  1. Jonathan

    TranslateZ stacking only working correctly in Safari

    Hello @notgettingstabbed and Welcome to the GreenSock Forum! First off love your forum handle, very funny. Glad you figured it out. Just a handy rule of thumb. Its best practice not to use any negative z-index, since it will cause you cross browser shenanigans due to stacking context of transforms and how z-depth works, aka z-index. You should never go past a value of 0, using z-index: 0 as your most bottom layer. Happy Tweening
  2. Jonathan

    SplitText animation

    Its a little tricky to have width and or scaleX be added after the words go up since those properties are whats used to animate the non animated text (.c-intro-title__fixed-part) to stay centered. What you want, would require me to re-layout how the markup and initial CSS is so it can use other ways to animate the centered text so its responsive. But when i have more time i can try and do that but im a little strapped for time right now. If it was me, I would first work out the auto centering animation of the h1.c-intro-title element. And then once that auto centers, work on animating its children with SplitText. Since the <h1> element is what needs to be animated to account for its children's width due to how you want to have no width or scaleX applied, until after the SplitText animates the y property (translateY).
  3. Hi again The best way to get this solved faster is to create a limited reduced codepen demo using the CSSRulePlugin setup CSS, JS, and HTML. Then once you see it run correctly in codepen you will know that the issue is with your local react setup. Plus we can actually see some code with an animation to test live. But without seeing your code in a live editable environment we wont be able to see whats going on to help you better. You should also check out StackOverflow for CSS pseudo-elements and React: Thanks!
  4. Thanks for posting your output error. What is the version of GSAP you are using in that bundle.js? Also what OS and OS version are you testing this on? :)
  5. Just to piggy back on what Jack (@GreenSock) wrote. Have you tried running your GSAP code only after the DOM is ready/loaded (html document) and the window is loaded (all external assets are loaded). This will make sure you only run your code when the DOM is ready and the window is fully loaded. I never messed with REACT so i dont know how react loads or if it waits for DOM and window to be loaded before running your custom JS. For example this will make sure that the window and DOM are fully loaded even if the document or window fire before or after one another: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until all external assets are loaded (media assets, images, css, js, fonts, etc) window.addEventListener("load", function (event) { // add custom GSAP code here }, false); });
  6. Hi @Yashi-2 and Welcome to the GreenSock Forum! Make sure that your the CSS rule used in your getRule() method is the exact same CSS rule used in your CSS stylesheet. So since you have the following getRule() : getRule(".header__outer:after") your CSS stylesheet should also have the following: .header__outer:after { } Happy Tweeening!
  7. Jonathan

    SplitText animation

    Hello @mdo and Welcome to the GreenSock Forum! The issue is due to how the <span> element CSS display property works which defaults to inline, as well as how opacity works. Not to mention that the text is aligned to center. So since your using opacity: 0 that will just fade out but the element will still take up the same about of space in the DOM. So i added the CSS property display: "none" in the tween which will automatically add the display: none property after opacity reaches 0. GSAP is smart enough to do that I changed opacity with GSAP special property autoAlpha for better performance (See below for more info). Along with adding the CSS width property so it can be smoother. I also added autoRound: false so width can animate on a sub-pixel level instead of round whole numbers. Of course there could be more done to try and animate the static non SplitText text separately and in sync with the SplitText text. But hopefully this all makes sense: Keep in mind that i changed opacity to autoAlpha for better performance. See CSSPlugin Docs on what autoAlpha is. autoAlpha: Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible, 2, {autoAlpha:1, delay:2}); Happy Tweening
  8. Jonathan

    tween 3D property "z" not taking effect

    Hi @espeigeltmsw and Welcome to the GreenSock forum! I tried to pull up your link from above but the browser tab kept spinning and would not load fully. Looks like your using canvas in that codesandbox link whereas the codepen one your trying to port over is CSS transforms and DOM. Based on the canvas context your using it is 2d. So z (translateZ) property does not exist for you to animate: const ctx = canvasNode.getContext("2d"); Keep in mind for canvas, that it is basically 2D not 3D, and will only support translate, rotate, scale, and skew. But z (translateZ) is part of the 3D context webgl (see this link) if using a canvas 3D context. It is possible to mimic a 3D effect with canvas but it relies on heavy math to calculate that. For canvas that is 3D you have to look into WebGL.
  9. Jonathan

    Counter with Separator Decimal Point or Comma

    Hi @Whitby and Welcome to the GreenSock Forum! To do this you need to have the to() tween in a for loop and use let instead of var so you can iterate DOM elements in the loop properly. function numberWithCommas(n) { var parts=n.toString().split("."); return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); } var endingCounterVar = [2100, 1000, 1500, 1800]; for (let i = 0; i <= 3; i++) { let counter = { var: 0 }; let tal = document.getElementById("tal-"+i);, 5, { var: endingCounterVar[i], onUpdate: function () { let nwc = numberWithCommas(counter.var); tal.innerHTML = nwc; }, ease:Circ.easeOut }); } Differences between using Javascript let vs var in the below codepen example (better to view on codepen with console to see output): Happy Tweening
  10. Jonathan

    addPause: the behavior is unexpected

    Hello @RolandSoos Just a thought, just so you can rule out codepen's website causing any shenanigans try running your codepen in Debug mode. Debug mode runs your codepen without an iframe, unlike with Edit and Full modes which display your code within an iframe. To use Codepen's Debug mode with no iframe, in your codepen url change /pen/ to /debug/. See if it still has that issue, this way you can rule out codepen's nested iframes as causing your issue. Happy Tweening !
  11. Jonathan

    Smooth Scroll Doesn't work on Firefox V 64.0 Windows 10

    Hello @SaidOurhou Sorry your having issues. You will get a better smooth scroll by just binding an event to the scroll event instead of mousewheel event. The mousewheel event can be inconsistent since its still non standard and experimental (see mousewheel docs). For a nice smooth scroll effect you can look at this post topic: Also with scroll events you might want to look into throttling and debouncing for scrolling events to prevent jank (lost frames choppiness) and get smooth silkiness. Since your code will be firing an insane amount of times due to how the scroll event fires. Happy Tweening
  12. Jonathan

    progress() not working

    Hello @Lacika1981 and Welcome to the GreenSock Forum! Sorry your having issues. Can you please create a reduced codepen demo example so we can see your code in action to test properly? This way we can test in a live editable site to better help you and see exactly what is happening. Thank You
  13. Jonathan

    Booklet image slideshow effect with GSAP

    Yes, it looks like @mikel already advised what i would have.. to use z-index to control the stacking of the active pages. Some resources: CSS z-index: Understanding CSS z-index: The Stacking Context: Happy Tweening or Flipping!
  14. Jonathan

    Booklet image slideshow effect with GSAP

    Hello @namisuki and Welcome to the GreenSock Forum! To make an image slider it would have many parts. As far as the flip swinging door effect, here is an example of doing that in GSAP. It uses a mouseenter / mouseleave event, but the event can be changed to click. But it will show you the HTML markup and CSS used to setup a swinging door effect, and animating the CSS rotationY (rotateY) property. Happy Tweening !
  15. Jonathan

    Unwanted thin border using MorphSVG

    Hello @wcomp and welcome to the GreenSock Forum! It looks like this is happening due to something in your SVG Markup. I could only see this in Chrome, but not in Firefox on Windows 10. I took your SVG code and pasted it inside a free online SVG Optimizer Clean Up tool. I made sure i toggled off Clean Id's so it kept your ID attributes on your <g> tags inside your SVG. So now when testing in a webkit browser you do not see the border shenanigans after animating. The border was being caused by some coordinates that were causing an overflow of your path. But that online tool cleans it up now You can see in this below codepen that it no longer has that red border on the outside parts of the SVG. Does that help? SVG resources: - Happy Tweening!