Jonathan

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!

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: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

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: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model CSS box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

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("http://www.w3.org/2000/svg", '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

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: https://greensock.com/docs/Plugins/CSSRulePlugin 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

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!

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!

Hello @jesper.landberg, The reason you would use GSAP set() versus element.style is so GSAP can keep track of what you are setting. If you use element.style, 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 element.style. Using element.style 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

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: https://developer.mozilla.org/en-US/docs/Web/CSS/position CSS layout positioning: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning CSS visual formatting model: https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model

Hello @Yaniv Nagar and welcome to the GreenSock Forum! This is not a bug, but your targeting a CSS Rule that does not exist in your compiled CSS. You must match the CSS Rule exactly, meaning use the same CSS Rule selector in your compiled CSS in your CSSRulePlugin getRule(). Your issue is that your asking GSAP CSSRulePlugin to find a specific selector, but your not giving the same selector as shown in your CSS. If you look closely your SCSS CSS when compiled show this as your selector: .header .level_number:before not .level_number:before which is why it fails // The CSS rule in your compiled CSS .header .level_number:before // But you are trying to target this CSS rule which is not exactly in your compiled CSS .level_number:before // They dont match that is why it fails. So please use like you were doing CSSRulePlugin.getRule(".header .level_number:before"); So you want to make sure that your GSAP selector for the rule is the same as whats in your CSS rule selector. As a rule of thumb when using the CSSRulePlugin you want to always use the exact CSS Rule selector since that is what your trying to animate, that exact CSS rule in your CSS. Happy Tweening!

Hello @OxXxigen and Welcome to the GreenSock Forum! Also adding to all the great advice here If you want to prevent that you can also use transform-style: preserve-3d when you use perspective with zero rotation, to prevent the browser from switching it to flat. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style Just my two cents

Usually its best to just create your timeline outside of your hover event handlers, and just play on hover in (mouseenter) and reverse the timeline on hover out (mouseleave). Below are examples of playing and reversing a timeline when hovering so you don't have to create multiple timelines on each hover. This way you create one timeline and just simply play and reverse the timeline animation. Adding a timelines to multiple elements Happy tweening!

Hi @mikel What browser and browser version did you see this on? I tested in latest Firefox on Windows 10 and saw each scrollTo act as the rest of the ones. I also tested in different order. Thanks for any additional info

Hello @HHCC IT Department and welcome to the GreenSock forum! In your example do you have autoKill set to false? If so try switching it to autoKill: true since by default the ScrollToPlugin has autoKill set to true, so any outside interaction will autoKill the scroll like you are expecting. Please see the ScollToPlugin Docs: https://greensock.com/docs/Plugins/ScrollToPlugin If your still having an issue please create a codepen demo example so we can test your code live and in action to better help you.

Hello @jiggy1965 and Welcome to the GreenSock forum! You might be dealing with an event bubbling issue. You could try and use mouseenter instead of mouseover, and use mouseleave instead of mouseout. Mouseneter and mouseleave do not allow event bubbling like mouseover and mouseout, so that can help with the multiple event firing your seeing. Event mouseenter: https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter Event mouseleave: https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave Event Bubbling: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture jQuery mouseenter(): https://api.jquery.com/mouseenter/ jQuery mouseleave(): https://api.jquery.com/mouseleave/ But to better help you, can you please create a limited codepen demo example. This way we can see your code live and in action to test. Thanks Happy Tweening!

Hello @Jemes Any reason why your trying to animate a to() tween with a duration of 0.01 seconds. I don't see how a duration value that small can visually be animated. The duration value might as well be 0, did you mean to use a set() instead of a to(). But like @Carl advised a codepen demo example would be good if you would like us to assist you properly.

Glad to help Sorry I dont have access to Safari on Mac OsX, so i was unable to debug that to fix. For Mac OsX Safari, You could still increase your z (translateZ) value so it pushes the layer forward and out of the intersection of the rotated image. And then only add if Mac OsX. I believe the CSS rule for targeting only Safari Mac OsX is the following but i don't have a Mac OsX to test the following on: _::-webkit-full-page-media, _:future, :root { /* Safari 7.1 - 8.0 (Safari 7.1+) */ /* add extra transform: translateZ() value here for Mac OsX Safari */ } Happy Tweening!

Hello @themepunch This is happening since the layer is rotating causing the rotated bg to intersect the z-axis of it. You will have to move the layer so its z-axis is moved forward so the intersection doesnt overlap the layer text. But this is a Safari z-axis bug that i have seen many times when you nest various elements with rotation. So you will have to account for it, but then you will have to change the translate X and Y to accommodate the z-axis. A better way is to just change your markup so its standardized with how absolute and relative positioning work in the browser. You have various absolutely positioned nested elements with some having nested rotation which can cause this type of rendering in Safari. I know I have said this many times in this forum, but you shouldn't be setting position absolute without having a parent set to position relative, so the browser can stack elements appropriately. So what i did in your above codepen's CSS: on bg, i changed z to z-index so its proper syntax on layer, I changed position: absolute to position: relative on layer_wrap, i changed z to z-index so its proper syntax on layer, I changed position: relative to position: absolute on layer, i added z-index so it stacks correctly on layer, I added top: 0px since its always best to define your offsets and not trust the browser user defined style sheet which is usually set to auto on layer, i added white-space: nowrap so the text doesnt wrap If it was me I would also add a parent element with position relative to world element so world is absolutely positioned relative to its parent to prevent issues like you were seeing above when nesting elements. Try this modified fork of your codepen. Tested on iPad Pro with latest Safari and I didnt see the intersection of rotated elements now. Happy Tweening! Resources: CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Thanks for allowing us to view the video Do you have a screenshot or example of the 2 elements your display block and none on. Or a tree markup so we can see context of both mobile and desktop in the DOM.. Because it will be hard to debug on what might be happening. Also are you using 768px as your break point from desktop to mobile. Also what are using to swap display block and none, A resize event. And if so are you throttling and or debouncing the resize event so its not changing the bootstrap classes multiple times due to how the resize event fire multiple times within a second. :0

Hello @BONOMITE and welcome to the GreenSock forum! When i look at both codepen examples above i do not see display none or block used at all? And when i try to view your ent.box.com video it goes to a log in screen. So a person will need to log in or register to see the video which most people wont do, for times sake. Can you please describe the specific issue your having so we can understand what your seeing and what is happening in your code example? Thanks

Try the below.. window.onload has always been buggy in IE window.addEventListener("load", function(){ // code goes here }, false);

Hello @Johanna and welcome to the GreenSock forums! Try a comma separated string instead of an array for the selector target parameter, How does that help? TweenLite.set("#desktopTick, .desktopFormContent, #desktopSignature, #leftJump, #rightJump, .tabletDing, .smartphoneDing", {drawSVG:0}); TweenLite.set(["#tabletFormContent, #smartphoneFormContent"], {opacity:0}); And see if that helps IE11 evil

Ha.. @OSUblake beat me to it, I was gonna suggest the same thing to do with autoRound and without an onUpdate. @maguskrool That codepen you forked from me was made several years ago when CSS Filters were not supported consistently cross browser. But since then browser support has increased and there is really no need to animate CSS filters with an onUpdate anymore. Plus GSAP supports animating CSS Filters without it now. CSSPlugin Docs: autoRound: https://greensock.com/docs/Plugins/CSSPlugin#autoRound Happy Tweening

Hi The Mighty @Carl.. Yeah i found that odd. When i click twice i see this in the console it outputs Clicked false Clicked false Clicked true The user has to click twice and wait for an action which could be a usability issue. @Simion Iulian Any reason on line 23 ( let play = false; ) you just don't set that to true so the user only has to click one time ? On line 23 you have the following: // you have this let play = false; // if you set to true the user only has to click one time let play = true; Also couldn't you just animate scrollbar instead like Jack ( @GreenSock ) advised so your only animating one thing, the scrollbar versus staggering animating every <li> tag? Just my two cents. Happy Tweening

Hello @Hugh Nivers and Welcome to the GreenSock Forum! What browser and browser version do you see this difference of behavior? Also keep in mind that when you run your code in codepen edit mode, that it renders inside an iframe. You would have to view your codepen in debug mode so codepen renders without being in an iframe. So in your codepen URL you would change /pen/ to /debug/ If you still see the behavior difference than you can at least narrow down your issue isnt that your code is being run through an iframe. Which can cause render and functional problems sometimes when viewing in codepen.