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

Posts posted by Jonathan

  1. 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.

     

    See the Pen EqPdXo by jonathan (@jonathan) on CodePen

     

    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 ?

     

    See the Pen eMLogz by jonathan (@jonathan) on CodePen

     

    Happy Tweening! :)

    • Like 4
  2. On 7/20/2019 at 3:23 PM, Snoop said:

    I managed to get it working, it turns out that it was the rotation:0.01, which actually was not working in this case but causing the animation to jitter in the end. So I dropped that and tested in Opera, Chrome, IE and Firefox (ugh).

     

    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.

     

    On 7/20/2019 at 8:54 PM, Visual-Q said:

    Uh oh, the GSAP Moderators have spit into two opposing IE11 factions, led by Blake and Jonathan respectively. Civil war will soon follow?

     

    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  :)

    • Like 5
  3. 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. :blink:

    • Like 2
  4. 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! :)

    • Like 2
  5. 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 :)
    • Like 1
  6. 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.

     

    :)

    • Like 4
  7. 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!

    • Like 5
  8. 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.

     

    :)

    • Like 3
  9. Hi @Visual-Q
     

    On 7/12/2019 at 10:57 PM, Visual-Q said:

    Wondering if it could be because the event already fired before the listener is even added mentioned here: 

     

    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.

     

    :)

    • Like 2
  10. Hello @Nexal and Welcome to the GreenSock Forum!

     

    When you say:

     

    1 hour ago, Nexal said:

    I have a certain number of animations on the same page

     

    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

     

    :)

    • Like 3
  11. @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. :blink:

     

    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!

    • Like 4
  12. 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! :)

     

     

    • Like 5
  13. 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 :)

    • Like 3
  14. On 7/4/2019 at 2:57 PM, WebDynamix said:

    I don't understand why to pay a fckin library when I see this kind of answers !

     

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

     

    Happy Tweening :)

    • Like 3
  15. 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 :blink:

     

    GSAP set() method: https://greensock.com/docs/TweenLite/static.set()

     

    Happy Tweening :)

    • Like 3
  16. On 6/30/2019 at 9:01 AM, clickdeproduto said:

    yes, I was looking for a solution for gradient text without css, just with javascript, so that it would be compatible with older browsers, the animation only worked in firefox in version 67.

     

    What specific browsers and browser versions are you trying to target?

    • Like 2
  17. On 9/22/2017 at 6:37 AM, GNB said:

    May be its this cultural thing, but in my side of the world if you make a fool of someone and make them wait in a queue and dont reply, its natural to get a snarky question or worse, if they feel they will not be answered. 

     

    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!

     

    :)

    • Like 4
  18. 13 hours ago, OSUblake said:

    I understand why clients want to support every browser, but I try to get them to rethink that... maybe by charging them extra to support IE with all the bells and whistles. ?

     

     There are some online stores that actually charge the customer an extra fee if purchasing within Internet Explorer.

     

    :)

    • Like 1
    • Haha 3
  19. 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!

    • Like 2
×