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. Hi @Tompy and Welcome to the GreenSock forum! I tested your codepen in latest Firefox (62.0.3) and Chrome (69) on Windows 10. I could not see a delay in any of the 3 animations. Are you seeing this on an Apple desktop or mobile device / computer? What OS and OS version are you seeing this on? What browser and browser version are you seeing this on? Any additional info will help us help you figure why your seeing this delay. Thanks
  2. Hi @jungleD and welcome to the GreenSock Forum! Sorry your having trouble. Thank you for all the helpful information. To help speed up trying to find out what is going on. Can you please can create a reduced codepen demo example of this, it will help us to test in live editable environment so we can better see why this is happening. We would sure appreciate it: Thanks
  3. Keep in mind @emilychews, that under the hood GSAP uses document.querySelectorAll() for the tween target parameter. So this way you just simply put your CSS selector in your tween target. This way you have less code to write tl.from(target, duration, vars); The target can accept a string also to put your CSS selector: tl.from(".page-1", 1, { y: 10, opacity: 0.3 }) Taken from the GSAP from() Docs: https://greensock.com/docs/TweenMax/static.from() target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). Happy Tweening
  4. Hi again @emilychews If you try my above codepen again you should see its working, I guess codepen didn't save my pen correctly. You don't have to rework your code just wrap with if statement checking the length property or ... You can just have an if statement around the target element for your tween. If .page-1 exists that use that, if it doesn not exist then use .box-1 variable. Using ternary operator way: var page1; page1 = (page1.attributes.length === 0) ? document.getElementsByClassName("page-1")[0] : document.getElementsByClassName("box-1")[0]; tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Or using regular if statement block for better readability since ternary operator way is one long line. var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length === 0) { // use .box-1 if .page-1 class does not exist page1 = document.getElementsByClassName("box-1")[0]; } tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Like this: Does that help
  5. Hello @emilychews and Welcome to the GreenSock Forum! To make your code run on just the page you want without throwing that error when it doesn't exist... You can do this by checking the length of the page1 var is greater than zero which i have below, or even check that it doesn't equal zero: var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length > 0) { // your gsap and other code goes here } And with all your code: Happy Tweening!
  6. Hello @Friebel and welcome to the GreenSock Forum! I remember reading awhile ago that Safari will throttle down the RAF on cross-origin iframes content until they are interacted with. Maybe it also effects non cross-origin iframes as well. Maybe you can fake trigger an interaction event handler on the iframe when the page loads, but I'm just pulling at straw here. The browser might be treating that non interacted iframe as an inactive browser tab. When the browser tab is inactive the browser will automatically throttle down the requestAnmiationFrame (RAF). So that same logic would dictate that the iframe needs to be interacted with so it gains focus. But if its a cross-origin iframe than that is a security sandbox issue. Happy Tweening
  7. Hello @hybreeder and welcome to the GreenSock Forum! For color mouse hover text color.. this should be as simple as just positioning your elements within the anchor tag with z-index. Forking @mikel codepen of your codepen. You should wrap your anchor tag (.tbtn) text with a <span> tag Give that span CSS position: relative and z-index: 2 .t_btn span { position: relative; z-index: 2; } <a href="javascript:void(0);" class="t_btn btn_bg t_btn_about"> <span>Hover me</span> <div class="hover_overlay"></div> </a> Then: give .hover_overlay a z-index of 1. (never use negative z-index like -1, since it doesn't work cross browser, only use positive z-index values) Happy Tweening!
  8. Hello @frankallen and welcome to the GreenSock Forums! Are you seeing this in iOS Chrome or iOS Safari? Without an example like @Shaun Gorneau advised, it will be impossible to narrow down what is happening on a live site. It is hard to debug a live site without isolating just your GSAP code. Please create a reduced codepen demo example so we can test your code in a live editable environment to better help you. Thanks
  9. Hello @benoit Can you please give us more details on what exactly you are trying to do. Its confusing since in your code it keeps replacing a child with the same exact <div> element with the same class and the same text value. Any reason why your doing that? All that will do is cause some layout thrashing of constantly trying to animate something that is affecting layout calculations for the same element. Also keep in mind that when animating transforms you should set the CSS position to absolute so it doesn't cause a reflow of the layout in the document flow. Any additional information will be helpful in letting us know how we can help you Resources: https://www.impressivewebs.com/absolute-position-css/ https://www.w3.org/TR/css-position-3/#abs-pos
  10. Hello @webrhythm and Welcome to the GreenSock Forum! Here is an example of using the CSSRulePlugin with a GSAP timeline, using TimelineMax. Happy Tweening!
  11. Hello @ivanguinea and Welcome to the GreenSock Forum! Be careful about using the <object> element, you will have many cross browser bugs and have to deal with random security issues for cross domain and cross origin policy shenanigans. Its better to just output your SVG markup without the <object> element and use other ways described in the post link @mikel pointed to. But that is just my two cent.
  12. Hello @jsciumi and welcome to the GreenSock Forum! When i looked at the above codepen I could not see the exact issue you were describing. Where the "f" in "Transform" was filling in after the staggerTo was complete. I tested in latest Chrome and Firefox on Windows 10 but did not see this? What broswer and and OS did you see this in?
  13. When i inspect Chrome, GSAP is indeed interpolating values for the svg filter. But Chrome isn't rendering anything, oh Chromernet Explorer 6
  14. Hello @AntonKeller and welcome to the GreenSock Forum! Glad you got it working
  15. 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.
  16. 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
  17. 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
  18. @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
  19. 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!
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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!
  25. 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!