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. @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. https://developers.google.com/web/fundamentals/performance/rendering/ 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.
  2. 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
  3. 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
  4. 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
  5. 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 toggleSearch.play(); }) 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 */ .search.active { -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
  6. 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!
  7. Hi @Technics1210 Glad to help! Happy Tweening!
  8. 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
  9. 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).
  10. 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: https://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react/28269950 Thanks!
  11. 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? :)
  12. 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); });
  13. 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!
  14. 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. https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha 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 TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Happy Tweening
  15. Hi @espeigeltmsw and Welcome to the GreenSock forum! I tried to pull up your codesandbox.io 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.
  16. 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); TweenMax.to(counter, 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
  17. 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/. https://codepen.io/anon/debug/vvdqEm See if it still has that issue, this way you can rule out codepen's nested iframes as causing your issue. Happy Tweening !
  18. 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. https://www.html5rocks.com/en/tutorials/speed/animations/ https://css-tricks.com/debouncing-throttling-explained-examples/ Happy Tweening
  19. 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
  20. 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: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index Understanding CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index The Stacking Context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Happy Tweening or Flipping!
  21. 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 !
  22. 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. https://jakearchibald.github.io/svgomg/ 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: - https://greensock.com/svg-tips Happy Tweening!
  23. When i go to that website link you provided I get an error in the console: ReferenceError: $owl is not defined 2443da7113af4abb37536a668c4fc92d.js line 25
  24. hi @franklylate, and Welcome to the GreenSock Forum! You really don't need the add() method for what your doing. The add() method is best used when adding child tweens or timelines to a master timeline. In a loop would look like this // tweens in a for loop var count = 32; for (var i = 0; i < count; i++) { introaniTL.from("div.tilecontainer img:nth-child("+i+")", randomPoint5to2(), { y: '-787.5', ease: SteppedEase.config(18), }, "tg"); } Please take a look at this CSSTricks article by the Mighty @Carl on Writing Smarter Animation Code and using the add() method: https://css-tricks.com/writing-smarter-animation-code/ Also since your using from() tweens, you will find this tut helpful when using any from tween like from(), fromTo(), staggerFrom(), or staggerFromTo() : Happy Tweening!
  25. Hi @elpeyotl and welcome to the GreenSock Forum!~ Sorry your having issues. Based on your above codepen example i see that it is throwing a error on a script being loaded in, es.promise.js. Maybe its a codepen permissions issue? I didn't see any undefined variables in the codepen due to that script loading an error. Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." es6.promise.js:97 08:50:50.811 Unhandled promise rejection FirebaseError: "Missing or insufficient permissions." e https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:412535 openStream https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:497518 f https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:496766 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 Ca https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1219538 Oa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1217188 dd https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1185311 ed https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184627 ad https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1184022 Sa https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206393 nb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1206350 Ab https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1175938 dispatchEvent https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1203470 ve https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1191916 jb https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213667 Na https://static.codepen.io/assets/packs/common-vendors-7a32566e6b43fa170706.js:1:1213639 es6.promise.js:97 To just output variable of getBoundingClientRect() width, then use this: var iconBoxRect = iconBox.getBoundingClientRect(); console.log(iconBoxRect.width); Happy Tweening