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

 Content Type 

Posts posted by Jonathan

    some of the animation didn't works well on iPhone 6, 6s, and iPhone 7.

    in GSAP

    Posted

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

     

    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.”
    • Like 3

    probleme css rotateY() and opacity/position, can I use GSAP or would it be overkill ?

    in GSAP

    Posted

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

     

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

    • Like 5
    • Thanks 1

    Load dynamically through ajax

    in GSAP

    Posted

    Hi @MZBS and welcome to the GreenSock Forum!

     

    On 9/2/2019 at 5:16 AM, MZBS said:

    I tried to add a load function and then the play but I am not really sure how to make this work:

      

    
$('.element_container_1').load('element_content_1.html',function(){


    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

     

     

    :)

    • Like 2

    Scaling table causes gap in tds

    in GSAP

    Posted

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

    • Like 5

    Identical code but "Cannot tween a null target." on pseudoelements

    in GSAP

    Posted

    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

    IE11, sliding text down (open sans), wobbly before stop

    in GSAP

    Posted

    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

    Draggable causes two clicks on iPad?

    in GSAP

    Posted

    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

    Draggable causes two clicks on iPad?

    in GSAP

    Posted

    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

    Draggable causes two clicks on iPad?

    in GSAP

    Posted

    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

    GSAP accordion expanding issue

    in GSAP

    Posted

    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

    Goldendust20

    in GSAP

    Posted

    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

    Is jquery required?

    in GSAP

    Posted

    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

    Is jquery required?

    in GSAP

    Posted

    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

    animation doesn't work proprerty on Ipad and Iphone

    in GSAP

    Posted

    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

    IE11, sliding text down (open sans), wobbly before stop

    in GSAP

    Posted

    @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

    SEO and GSAP

    in GSAP

    Posted

    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

    TimelineMax in relation to CSSPlugin

    in GSAP

    Posted

    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
1
2
3
...
142
Page 2 of 142  
×
×
  • Create New...