Jump to content
Search Community

Jonathan last won the day on June 18 2019

Jonathan had the most liked content!

Jonathan

Moderators
  • Posts

    3,548
  • Joined

  • Last visited

  • Days Won

    133

Everything posted by Jonathan

  1. Knowing the iOS version and Browser Version go along way in finding what could be happening since various render bugs are related to various versions of the OS and Browser. They are sneaky that way.. To check iOS Version / Safari Version: On an iPhone, iPad, or iPod touch To find the iOS version installed on your device, go to Settings > General > About To check iOS Chrome Version Open Chrome on your iPhone or iPad. It's the round red, blue, yellow, and green icon labeled “Chrome” that's usually on the home screen Tap ⁝. It's at the top-right corner of the screen. Scroll down and tap Settings. ... Scroll down and tap Google Chrome. ... Find the version number next to “Version.”
  2. Hello @Agin DropDisco and Welcome to the GreenSock forum! So we can have more information to better help you, please answer the following: What specific version of iOS on iPhone7, iPhone 6, and iPhone 6s? What specific browser, Chrome or Safari? What specific browser version for Chrome or Safari? We appreciate any additional information you can provide, Thank You
  3. Hi @Demky and welcome to the GreenSock Forum! That delay is slight and is that element with opacity being put on its own rendering layer after a snapshot has been taken. That is why it only happened on the first load so it can create that new rendering layer from the snapshot. Just keep in mind that if you have one parent, in this case .flip-card-back that has a child with a CSS property that creates a new stacking context.. like opacity. That you will often have to trigger a new stacking context on the parent (.flip-card-back) also, by adding either an old CSS hack of translateZ(0), an opacity: 0.9999999, or other CSS properties that trigger a new stacking context (see the below link). It is the same principle when you have an element with overflow: hidden and its child or parent has a transform or opacity triggering a new stacking context. The parent will not allow overflow: hidden to work unless you also give the parent a new stacking context with one of the CSS hacks. Then the parent will have overflow: hidden work as expected. Google Chrome has more bugs than IE used to ever have. So sometimes you will have to play with the CSS properties of transform-style, and blackface-visibility. But don't forget that Chrome will also act buggy depending on the perspective used. Whether that is the stand alone perspective property or even when you use the transform: perspective() function. I have found that the transform: perspective() function is less buggy than the perspective property in Chrome. The GSAP animation version probably has no issues since it is using matrix3d(), i presume. There is the CSS will-change property but that is a whole other bag of bugs. See @GreenSock (Jack's) explanation of will-change and its crazy behavior of over use. Plus Google Chrome will keep changing behavior of that so use at your own risk. CSS Stacking Context triggers: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context CSS Perspective Property: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective CSS Perspective Function: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective Happy Tweening
  4. I was referring to the jQuery load() method https://api.jquery.com/load-event/ My tired eyes overlooked the .html in the first parameter
  5. Hi @MZBS and welcome to the GreenSock Forum! Keep in mind that the jQuery load() method is deprecated, that means it will be removed from jQuery core soon. But yes like @ZachSaucier advised, a simplified demo will help us better in helping you
  6. Hi @danboyle8637 and Welcome to the GreenSock Forum! Also don't forget if the type is left, top that the draggable elements parent also plays a role, depending if the parent has position relative or absolute.
  7. You can also get rid of that gap line by adding z: 0.01 on your tween with the transform perspective function. Its like using will-change: transform or having transform: translateZ(0) in your CSS. Its the same like we used to do back in the day with crappy IE, by adding zoom: 1. Perspective fixes that Chrome bug, which is really not a bug, but Chrome requires that CSS 3D Transform helper property perspective and the transform perspective function so it can render correctly. Same goes for other helper properties... transform-style and backface-visibility. That just my two "non trolling" cents.. or is it ? :)
  8. HI @lzy100p and welcome to the GreenSock Forum! Also keep in mind that you should also target for clipPath (clip-path), not just webkitClipPath. So you cover your bases for non webkit browsers.
  9. Hello @Andrew Harris and Welcome to the GreenSock Forum! The reason it is not animating is if you look at your compiled SASS CSS, the selector #t1:after does not exist. I only see #t2:after and #t3:after in your compiled SASS CSS. Once you add #t1:after CSS rule inside your CSS, then you should not get that console error. You must make sure that the same exact CSS Rule your animating with the CSSRulePlugin is also in your CSS, very important I changed #t3:after in your CSS to #t1:after and you can see no errors get thrown. https://codepen.io/jonathan/pen/EqPdXo Here is an example of the GSAP CSSRulePlugin. Notice how i also have the same CSS Rules I'm trying to animate already defined in my CSS, so the CSSRulePlugin can find those CSS Rules to animate? .. Does that make sense ? https://codepen.io/jonathan/pen/eMLogz Happy Tweening!
  10. The reason that worked by removing it, Is because the rotation: 0.01 was adding a new rendering layer. By removing it the browser didn't have to take a snapshot of the font and add its horrible anti-aliasing which is what you saw at the end of the tween transition. Sometimes adding/removing certain CSS properties or adding/removing CSS transform specific properties can resolve that, since the browsers require other properties in order to render font correctly. But glad you got it working. LOL.. i just like making as many browsers render the same, especially if your selling products or services so you can reach the broadest audience (customers) possible. Knowing is half the battle, yo joe :)
  11. The only downside to the CSS overscroll-behavior property is that it disables pull-to-refresh, not just containing the bouncy scroll behavior. Hopefully eventually they also add another property value that allows you to contain bouncy overscroll without disabling pull to refresh.
  12. If you don't want that mobile touch bouncing you can also use the CSS property overscroll-behavior-y: contain or overscroll-behavior-y: none on the same element with the CSS overflow property. overscroll-behavior-y: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y
  13. You can also use event methods like stopPropagation or stopImmediatePropagation to prevent any event bubbling and prevent it from firing other events. Keep in mind that stopPropagation is different then preventDefault. event.stopPropagation https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation event.stopImmediatePropagation https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation Happy Tweening!
  14. Hi @marya and welcome to the GreenSock forum! Why not use onPress instead of onClick? onPress is like using mousedown. Draggable Docs: https://greensock.com/docs/Utilities/Draggable onPress: Function - a function that should be called as soon as the mouse (or touch) presses down on the element. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onPressScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, thepointerEvent (last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc. Happy Tweening
  15. You say you checked, but there is no element in the codepen HTML panel with a class of head, so that is why you get that error. It does not exist!
  16. You get that error since .head does not exist in the DOM, and outputs null. var menu = element.querySelector(".head"); // does not exist and outputs null Check your HTML markup and make sure all the elements your targeting with GSAP exist in the DOM (HTML/SVG) before you try and animate them.
  17. Hello @Goldendust20 and Welcome to the GreenSock Forum! I'm not seeing that "glitch" on Firefox and Chrome Windows 10. But if it was me I would convert your jQuery css() to the GSAP set() equivalent. So this way GSAP can keep track of what changes your doing outside itself: // So convert this jQuery css(): $list.add($clonedList).css({ "width" : listWidth + "px" }); // To this using GSAP set(): TweenLite.set([$list, $clonedList],{ "width" : listWidth + "px" }); Notice how i added multiple CSS selectors within the square brackets [ ] for the target parameter of the set method? GSAP set() : https://greensock.com/docs/TweenLite/static.set() Happy Tweening!
  18. Hello @Page Tailoring and welcome to the GreenSock Forum! Yes you can do that with the GSAP AttrPlugin. See the AttrPlugin Docs: https://greensock.com/docs/Plugins/AttrPlugin Happy Tweening
  19. Also keep in mind @Visual-Q that since your already using WordPress, it comes preloaded with jQuery. Then you could also use the jQuery ready() event instead of DOMContentLoaded to wrap your window load event. Since the jQuery ready() event already uses readyState, to help get around that Safari DOMContentLoaded bug.
  20. Hi @Visual-Q Yep.. that right. You had that issue in Safari because if the DOMContentLoaded already fired Safari will not fire its callback. Safari doesn't follow the spec in relation to DOMContentLoaded. Sometimes you have to use a setTimeout() due to how Safari logs the function within its callback. In my own tests I have seen the DOMContentLoaded fire either both before and after window load event. That is why I place the window load event within the ready event so no matter what the window event will fire my callback after the DOM is ready. This is because network connectivity can cause the window to fire before or after the DOM is ready. So that makes sure i have control when my custom code runs. But If your having issues with DOMContentLoaded.. the spec also allows you to bind DOMContentLoaded to the window instead, or you can check the readyState complete, like @OSUblake showed above.
  21. @OSUblake .. Why not disable any more comments in that smooth scrolling thread ? Otherwise it will keep coming back to life, like a zombie in the dark of the night.
  22. Hello @Nexal and Welcome to the GreenSock Forum! When you say: Do you mean the CSS animations that are on your page in the HTML panel. I see a style attribute with a ton of CSS animations. Its always best not to animate elements with GSAP if their children or parent elements have any CSS animations or CSS transitions on them. Otherwise you will have rendering issues due to the fighting of the two. Also what elements (id or class) are you referring to, you have a lot going on in that example? I am also seeing an error get thrown in the console. I notice terzafrase is an id selector not a class selector like you have in your code. invalid morphSVG tween value: .terzafrase
  23. @Snoop .. I don't mind taking a crack at it in IE11. I was late to the party and you might as well have it work in IE11, since it's the highest version of Internet explorer on Windows 7. And as much as I hate and despise IE11, its not a dead horse until January 14, 2020. So lets give that IE11 horse, one last ride into the sunset and see that codepen demo. But that wobble your seeing right at the end of your text animation, sounds like the rendering layer being removed after its transitioned. You could be missing some CSS transform properties that IE11 requires to render CSS transforms correctly after transitioning, especially for web font text. Its an old horse so some times you need some hay. ? You could make a limited codepen demo example so we can test it in IE11 to see if its a bug in IE11 or missing CSS properties to stop anti-aliasing mumbo jumbo. Happy Tweening!
  24. Jonathan

    SEO and GSAP

    SEO would be affected if your using the CSS property display: none, visibility: hidden or even high negative or positive text-indent on your H1 or main content. But having elements use opacity will only hurt your SEO with a very important exception. As long as your not using display: none, visibility: hidden, or a high text-indent value on your main content, then I wouldn't worry about it. Just be careful when using opacity, display: none, or visibility: hidden... to hide the important main content with your main search keywords and H1 tag. So be mindful that you could get lower ranking when its your main keyword content! Since first Google will parse the HTML, and then will parse the rendering of it with the CSS and JS. But you can always use Google PageSpeed Insights if you really need to test your webpage to see if Google reports that it doesn't like a specific thing your doing as far as hiding content. https://developers.google.com/speed/pagespeed/insights/ Happy Tweening!
  25. Hi @Snoop Keep in mind that with GSAP the CSSPlugin is what animates CSS properties within TweenMax. TweenMax includes the CSSPlugin and other GSAP plugins. But say you weren't going to use TweenMax, but TweenLite, TimelineLite or TimelineMax. Then you would need the CSSPlugin as a separate script since the CSSPlugin is what GSAP uses to animate CSS properties. TweenMax: https://greensock.com/docs/TweenMax Includes all of the following : TweenLite, TweenMax, TimelineLite, TimelineMax, CSSPlugin, EasePack, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin TimelineMax: https://greensock.com/docs/TimelineMax Includes the following : TimelineLite, TweenLite, and EasePack. It does not include the CSSPlugin. So if you use TweenMax in your project then it will already have the CSSPlugin included, you don't have to include it separately. Hope this helps, Happy Tweening
×
×
  • Create New...