Jonathan last won the day on March 26

Jonathan had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by Jonathan

  1. Jonathan

    Animating not absolute positioned elements

    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: CSS layout positioning: CSS visual formatting model:
  2. Jonathan

    CSSRulePlugin works in one case, not on another...

    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!
  3. Jonathan

    transformPerspective with zero rotation

    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. Just my two cents
  4. Jonathan

    TimeLineMax mouseover repeats itself

    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!
  5. Jonathan

    First scrollTo

    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
  6. Jonathan

    ScrollToPlugin IE/Edge Interrupt issue

    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: 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.
  7. Jonathan

    TimeLineMax mouseover repeats itself

    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: Event mouseleave: Event Bubbling: jQuery mouseenter(): jQuery 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!
  8. Jonathan

    className removing dynamically added classes

    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.
  9. Jonathan

    Perspective - Safari Issues

    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!
  10. Jonathan

    Perspective - Safari Issues

    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: CSS position:
  11. Jonathan

    display non to block mis-aligning animated elements?!?!

    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
  12. Jonathan

    display non to block mis-aligning animated elements?!?!

    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 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
  13. Jonathan

    Timeline.set not firing every time in IE11

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

    Timeline.set not firing every time in IE11

    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
  15. Jonathan

    TweenMax.set blur with decimal values

    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: Happy Tweening
  16. Jonathan

    Jitters when staggering on a list

    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
  17. Jonathan

    Browser Behaves Differently than Code Pen

    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.
  18. Jonathan

    Safari bug: _next & _prev

    Hello @ryanpwaldon and welcome to the GreenSock Forum! That will be pretty hard to debug without code we can test in an editable environment like codepen. Here is a page on how to create a codepen demo example: But here are 2 codepen examples of a different approaches to a GSAP typewriter effect: And a slightly different way to do a typewriter effect in GSAP: Happy Tweening!
  19. Jonathan

    Off-Topic: super weird Safari rendering bug

    You might want to add $(window).bind("load") within your $(document).ready(). Since the ready() event only deals with checking if the DOM is ready for the document tree node, and doesn't check for the window load event for the window tree node for images being fully loaded. This way it checks for the window load event making sure all assets like images, links, stylesheets, fonts, etc.. are fully loaded, which is different than document ready() event for the DOM. This way you can make sure its not a DOM ready along with window load event issue. As best practice i always do the following to make sure I only animate when DOM is ready and window is fully loaded, especially when i use image. But even if this doesn't solve your problem its always best to only animate when everything is loaded so you get consistent loading of your project cross browser, especially when you are animating images.. jQuery way: // wait until DOM is ready $(document).ready(function(){ // wait until window is loaded for all external assets like images, fonts, scripts, stylesheets, etc $(window).bind("load", function(){ // custom animation code goes here }); }); Even if the window is fully loaded before the ready() event, it will fire immediately when the ready event is fired. This way you ensure that both are fired in the right order due to server waiting times and other network shenanigans. Or native vanilla JS way: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded for all external assets like images, fonts, scripts, stylesheets, etc window.addEventListener("load", function(event) { // custom animation code goes here }, false); }); Happy Tweening
  20. Jonathan

    Off-Topic: super weird Safari rendering bug

    To me this looks like all the assets aren't loaded yet before they are trying to animate. I only saw this on iOS (11.2.1) IPAD in Safari and Chrome. Have you tried to only trigger the tweens and timeline after the window is loaded and the DOM is ready? ( This way all images have been loaded into memory and the DOM tree is fully built before animating )
  21. Jonathan

    Scale with text shaking the div

    From what i see, this is happening in Chrome. Firefox has very slight non-noticeable shake, but still looks smooth. But Chrome seems to be shaking much more like a wobbly wave. But i think this is more of an issue with first setting up the elements and markup with all right transform supported CSS. I was able to stop the shaking in Chrome, but i had to remove your initial inline transform with subpixel values on your nested div tag, along with adding some other transform supported CSS properties. But was taking too long to debug.
  22. Hello @twentytwo-jase and Welcome to the GreenSock Forum! Sorry your having an issue! We have some questions so we can help you better: What browsers is this in? What browser versions is this in? What operating system is this in? Thanks!
  23. Jonathan

    Prevent GSAP from transforming my transforms into matrix()

    Pretty sweet and simple viewport units to pixel conversion function Jack ( @GreenSock )
  24. Jonathan

    Will you drop legacy browsers?

    What.. no more IE8 support coming soon. But I love IE, I was just getting used to the no more IE6 being supported. (that was a joke, good riddance)
  25. Jonathan

    Split text confused

    Hi again @anotheruser and welcome to the GreenSock Forum! If you want to keep your existing HTML markup, you would have to also target that .text-container child <div> tag as well. Meaning another instance of splitText OR just use the SplitText target parameter to tell GSAP the CSS selector to use for targeting your .text-container children. Allow GSAP to target the elements with a CSS selector and don't use getElementsByClassName(). var mySplitText = new SplitText(".text-container > div", { type: "lines" }), splitTextTimeline = new TimelineLite(); splitTextTimeline.staggerFrom(mySplitText.lines, 1, { x: 800 }, 2); With a CSS selector like .text-container > div Happy Tweening Resources: SplitText Docs: