Jump to content

Jonathan last won the day on June 18 2019

Jonathan had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Jonathan last won the day on June 18 2019

Jonathan had the most liked content!

About Jonathan

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,802 profile views

Jonathan's Achievements


Newbie (1/14)




Community Answers

  1. 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.
  2. 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!
  3. 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 :)
  4. 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.
  5. 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
  6. 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!
  7. 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
  8. 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!
  9. 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.
  10. 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!
  11. 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
  12. 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.
  13. 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.
  14. @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.
  15. 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