Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Jonathan last won the day on June 18

Jonathan had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Jonathan last won the day on June 18

Jonathan had the most liked content!

Community Reputation

5,210 Superhero

About Jonathan

  • Rank
    Super Moderator

Contact Methods

Profile Information

  • Gender
  • Location
    United States
  • Interests
    Traditional Animation, Computer Animation, Drawing, DJing, Mycology, Traditional Chinese Medicine, and Herbalism

Recent Profile Visitors

22,537 profile views
  1. Besides the good advice from @OSUblake regarding process of elimination. Also you never responded to @ZachSaucier questions about describing the type of behavior your seeing. You can try cleaning up your SVG markup which can also cause render bugs. Here is an online SVG optimize clean up tool. (Dont forget to un-toggle Clean ID's in its options on the right after pasting your code in it) https://jakearchibald.github.io/svgomg/
  2. 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.”
  3. 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
  4. 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
  5. I was referring to the jQuery load() method https://api.jquery.com/load-event/ My tired eyes overlooked the .html in the first parameter
  6. 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
  7. 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.
  8. 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 ? :)
  9. 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.
  10. 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!
  11. 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 :)
  12. 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.
  13. 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
  14. 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!
  15. 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