Jonathan

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

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

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-custom', 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

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-js2', 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!

Its the name of the codepen @OSUblake posted above.

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

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?

@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.

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

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

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

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

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!

Hi @Technics1210 Glad to help! Happy Tweening!

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

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).

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!

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? :)

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); });

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!

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

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.

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

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 !

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