Jump to content
GreenSock

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!

Jonathan

Moderators
  • Posts

    3,514
  • Joined

  • Last visited

  • Days Won

    133

Everything posted by Jonathan

  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
  16. @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!
  17. 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!
  18. 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
  19. I know I'm late to the party. But without context you will get 3 different answers to a very vague question that can give you 3 different answers. Now me personally would have not even replied with an answer when someone is using or conveying profanity in the forum towards people trying to help them. But like @Dipscom said above Club GreenSock has no relationship to the free GSAP support given here in this forum. The community members will help you out of the kindness of their hearts. So please lets be a little more civil, and in kind you will get users in the community who will go above an beyond to help you using their own private time. Happy Tweening
  20. Keep in mind when using GSAP. Its best to use the GSAP set() method instead of the jQuery css() method. The reason being is that you will be changing CSS properties outside of GSAP. So this way GSAP can keep track of those CSS properties changed outside of itself by using the set() method. It will save you a lot of stress and hair pulling GSAP set() method: https://greensock.com/docs/TweenLite/static.set() Happy Tweening
  21. What specific browsers and browser versions are you trying to target?
  22. It is good to see a fellow smiley face around here. You have one up on me, since my avatar does not have any hands. But that's what mustaches are for.
  23. Sorry, I know this thread is years old, but i had to respond to this rude "cultural thing". Complaining that someone ( @OSUblake ) didn't take their own personal free time to help them with an in depth, time consuming question, with not even a whiff of being thankful or understanding. How dare you Blake not respond later that night while still suffering the effects of Hurricane Irma? You will always get at least one person who expects they should be waited on like your their coding butler manservant. Don't worry Blake I'm sure there are plenty of users in the forum who are grateful for your help!
  24. Jonathan

    Width Calc

    There are some online stores that actually charge the customer an extra fee if purchasing within Internet Explorer.
  25. Hello @mrrobot993 and welcome to the GreenSock Forum! I don't see the codepen example your trying to reference. That codepen link just goes to the homepage of Codepen. Please include the code example so we can better help you. Happy Tweening!
×