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

Posts posted by Jonathan

  1. @flysi3000

     

    I just tested and confirmed your above codepen on MacOS Monterey Safari 15.3 is working and force3D: false is working.

     

    When i remove force3D: false .. Safari does indeed pixelate the SVG making it look blurry with its  anti-alias transform bug. Then when i put back force3D: false, Safari does honor that setting to not force 3D transforms which trigger that browser bug.

     

    Have a great day :)

  2. Hello @flysi3000

     

    Interesting to know what version of safari for MacOS, iOS or iPadOS version this is being caused on?

     

    Not sure if this will help you without seeing your code example, but it has worked for me in the past. You can tell the browser not to render a parents children in 3D space or 3D transforms by adding the CSS property transform-style: flat; to the parent of the troublesome blurry child. Not sure if Safari will honor the spec in this regard, since any parent with transform-style: flat; should not have any of their children using the 3D space or 3D transforms.

     

    Keep in mind, very important that technically you add transform-style to the same element your transforms are being applied to since they work hand in hand. But  transform-style  is not inherited so you will also need to apply it to all children (descendants).

     

    .parent-element-with-transform {
       transform-style: flat; 
    }

    transform-style

    https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

    • Indicates that the children of the element are lying in the plane of the element itself.

    But best solution is like @GreenSock (Jack) advised to not scale above a factor of 1. Many years ago that became an issue and still is to this day for webkit based browsers. Start your initial scale lower than a factor of 1 and scale your element to its full size of scale 1. That trick works cross browser since even Chrome webkit has this blurry transformed element on <img> tags.

     

    But force3D:false should solve this, but Safari plays by its own rules and doesnt follow the spec most of the time.

     

    If all else fails just uninstall Safari (kidding) :)

     

    Jonathan :)

    • Like 3
  3. 17 hours ago, PaulB said:

    Just realized probably it could be some hardware issue, I have xeon on regular motherboard, maybe some memory issue or smth else but it is not the case if everywhere else it is working, thanks guys.

    • What GPU graphics card do you use on your Xeon PC?

    I have a Xeon PC at home and can check later on today to see if i still see it. Keep in mind that on my home xeon PC i dont use Nvidea GPU but a AMD Radeon GPU. I did not see it laggy on my non xeon pc that had Nvideo GPU.

     

    • Like 1
  4. 1 hour ago, PaulB said:

    This happening on chrome, firefox and edge.


    Do you have specific Browser versions of the browsers you listed?

    But that will help along with a limited reduced Codepen demo example like Jack advised above. :)

     

     

    • Like 1
  5. 2 hours ago, chrisgannon said:

    Chrome kept changing its video specs so every week or so I had to update my libraries. These changes were so frequent (and often broke all my work) that I eventually gave up because it was just far too much work to keep it maintained, plus the whole process of getting an interactive element tracked in 3D and composited onto video was a sprawling mess!


    I feel ya.. but you gotta love Chrome, the new IE :)
     

    • Like 1
  6. Hi @monixm and Welcome to the GreenSock Forum!

     

    Just some additional info we need to better help you:

    • What browser and browser version are you seeing this on?
    • What OS and OS version are you seeing this on?

    Some things you could do is to maybe add a slight rotation: 0.01 to your tween, and or also using autoAlpha instead of opacity for better performance.

     

    autoAlpha is part of the CSSPlugin:

     

    https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#autoAlpha

    • autoAlpha
      Identical to opacity except that when the value hits 0 the visibility property will be set to hidden in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to inherit. It is not set to visible in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that’s probably not what was intended). And for convenience, if the element’s visibility is initially set to hidden and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your CSS visibility: hidden) and then fade them in whenever you want.
    1. //fade out and set visibility:hidden
      gsap.to(element, {duration: 2, autoAlpha: 0});
      
      //in 2 seconds, fade back in with visibility:visible
      gsap.to(element, {duration: 2, autoAlpha: 1, delay: 2});

       

    Also to better help you and please setup a limited codepen demo example so we can test your code live. Since trying to debug your code from your website will be really hard without your isolating the GSAP issue.

     

     

    Happy Tweening! :)

    • Like 3
  7. 50 minutes ago, ZachSaucier said:
    57 minutes ago, Jonathan said:

    it must be like this with the duration being one of the vars parameters for GSAP 3 syntax as teh 2nd paramter

    That's not true - we recommend that people put the duration inside the vars parameter in GSAP 3 but they are allowed to put it as the second parameter if they want. Anyway, it's unrelated to this issue in Firefox. Your pen is still not working the same as other browsers for me at least (on Catalina).


    Your misreading my post  and whats in my code block. The 2nd parameter for GSAP 3 gsap.to() is the vars parameter. That is what i wrote and what's in my codepen.

     

    I have the duration parameter in the vars, which is the 2nd parameter of the gsap.to() method!

     

    I see it animating in latest Firefox Windows 10 with that change.

    • Like 2
  8. Hi @Wayrse and Welcome to the GreenSock Forum!

     

    I was going to fork it but since its a Private pen so I cant. Please see below to see why it wasn't working.

     

    Since you are using the new GSAP 3 syntax then you need to convert your gsap.to() tween to the following:

     

    gsap.to() https://greensock.com/docs/v3/GSAP/gsap.to()

     

    You have this with old GSAP 2 syntax with the duration as your second parameter:
     

    // you have this using GSAP 2 syntax
    test.to('.box', 1, {borderRadius: '10px'});

    But it must be like this with the duration being one of the vars parameters for GSAP 3 syntax as the 2nd parameter of the new gsap.to() method:
     

    // should be this using GSAP 3 syntax
    test.to('.box', {borderRadius: '10px', duration: 1});

    If you increased the duration you can see it better interpolate your border-radius, but even with 1 second you can see it animate even though its fast.

     

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

     

    Happy Tweening!

    :)

    • Like 3
  9. Hi @Dejan and Welcome to the GreenSock Forum!

     

    If you cant separate that code and its in a global JS file..

     

    Any reason you don't want to just add an if statement around that part of code so it doesn't run on that page?

     

    You can do an if check against the element or the page to see if it exists or is null.

     

    Using your above example to check if element is not null:

     

    gsap.registerPlugin(CSSRulePlugin, AttrPlugin, CSSPlugin);
    var tl = gsap.timeline({smoothChildTiming: true});
    
    //check if .linija-development exists in DOM before running
    var linijaDevelopment = document.querySelector(".linija-development");
    if(linijaDevelopment !== null){
      //gsap tween goes here
      tl.from(".linija-development",  {duration: 2, attr: {x1:2000, x2:2000}, scale:0.2, transformOrigin:"center", autoAlpha:0});
    }

    I forked your above codepen with the element exists check for null:

     

    See the Pen GRRbVzx?editors=1010#0 by jonathan (@jonathan) on CodePen

     

    Happy Tweening :)

     

    Resources:

    null: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null

     

    • Like 3
  10. Yeah just like Zack advised in his last post..

     

    You should enqueue the  GSAP script file that in that wp_enqueue_script() method.
     

    So you can add mediaelements.js as a dependency for GSAP.

     

    https://developer.wordpress.org/reference/functions/wp_enqueue_script/

     

    You can add dependencies for the 3rd parameter.

    • $deps -  array(Optional)
      An array of registered script handles this script depends on.

    Plus you can also tell it to load in the footer as the last parameter..

    • $in_footer - (bool) (Optional)
      Whether to enqueue the script before </body> instead of in the <head>.
      Default 'false'.
      Default value: false

    Happy Tweening :)

    • Like 2
  11. Hello @UltraCakeBakery and Welcome to the GreenSock Forum!

     

    There are various methods you can use such as clearProps or invalidate() before you restart() the animation.

     

    But to better help you please provide a limited reduced Codepen demo example so we can test your code in a live environment.

     

    Resources:
     

    GSAP v2 TimelineMax: https://greensock.com/docs/v2/TimelineMax

    GSAP v2 invalidate(): https://greensock.com/docs/v2/TimelineMax/invalidate()
     

    GSAP v3 Timeline: https://greensock.com/docs/v3/GSAP/Timeline

    GSAP v3 invalidate(): https://greensock.com/docs/v3/GSAP/Timeline/invalidate()

     

    Happy Tweening :)

     

    • Like 4
  12. Hello @Babakness and welcome to the GreenSock!

    • Are you seeing this on a Mac 12 with a Intel Graphics GPU with your Safari on Catalina?

    I know those Intel Graphics GPU have had this type of rendering artifact issue in previous Safari versions.

    • Also does it still add those artifacts if you add transform: translateZ(0) to the <svg> element?

    This way it can make it a fresh rendering paint layer of the element,  instead of just rendering only a composite layer.

     

    Just my two bits!

     

    Happy Tweening :)

    • Like 4
  13. Hello @jdw and Welcome to the GreenSock Forum!

     

    I noticed that in to() tween, your syntax for text-shadow has a typo with 2 semi-colons. 

     

    You have this with 2 semi-colons:

     

    textShadow: "0px 0px 0px black;, 2px 2px 8px deeppink;",

    But it should be like this with just your comma separated values, no semi-colons:
     

    textShadow: "0px 0px 0px black, 2px 2px 8px deeppink",

    CSS text-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

     

    Happy Tweening :)

    • Like 2
  14. Hey @MugenFTW

     

    Keep in mind that force3d: true, z, and rotationZ won't really work on SVG, since those CSS hacks wont work on SVG. This is because SVG does not fully support 3D transforms, only 2D transforms.

     

    You also might want to run your SVG through an online optimizer to make sure it is optimized and cleaned up of any shenanigans.

     

    https://jakearchibald.github.io/svgomg/ (Don't forget to un-toggle Clean ID's)

     

    Also you might want to reduce the amount of <paths>, or like @ZachSaucier advised use layered image, or even maybe a mix of SVG and images. This way you don't have so many SVG elements to animate. But regular non SVG elements, like <div> tags or <img> tags can take advantage of 3D transforms so you can animate on a sub-pixel level for silky smoothness.

     

    :)

    • Like 3
  15. Hi @Parina and Welcome to the GreenSock Forum!

     

    That link you provided is behind an htaccess password. So we cant see anything :ph34r:

     

    But in order for us to better help you please create a limited reduced Codepen demo example. This way we can test your code in a live editable environment.

     

     

    Happy Tweening :)

    • Like 1
  16. Hello @scotland_jack and Welcome to the GreenSock Forum!

     

    When i viewed your above codepen , I did not see the CSS property mix-blend-mode in there.

     

    There is a bug with Safari when trying to use mix-blend-mode with elements that have 3d transforms.

     

    You can usually get around it by adjusting your z-index, adding -webkit-backface-visibility: visible or also adding CSS hack of transalte3d(0,0,0) for your transform.

     

    The trick is to make sure that your element with a transform is also brought on the same rendering layer as the mix-blend-mode so it can render them together on the same layer.

     

    :)

    • Like 4
    • Thanks 1
  17. On 10/17/2019 at 4:35 PM, Sam said:

    but I am seeing my CPU/GPU usage spike when leaving the page idle

     

    When you say leaving the page idle..

    • do you mean leaving the page idle when the browser tab is active (selected) ??
    • or when it is not active (not selected) ??

    Because if its when the browser tab is not active, then you can just pause your animation by checking the HTML5 Visibility API. And then when you give the browser tab focus, making it active again.. you can resume / play the animation.

     

    Example of use:

     

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

     

    Happy Tweening :)

     

    • Like 3
  18. Hello @kbeats and welcome to the GreenSock forum!

     

    For an onComplete reverse please use the onReverseComplete special callback.

     

    Quote
    onReverseComplete:  Function - A function that should be called when the animation has reached its beginning again from the reverse direction. For example, if reverse() is called the tween will move back towards its beginning and when itstime reaches 0, onReverseComplete will be called. This can also happen if the animation is placed in a TimelineLite or TimelineMax instance that gets reversed and plays the animation backwards to (or past) the beginning.
     
    onReverseCompleteParams:  Array - An Array of parameters to pass the onReverseComplete function. For example, TweenMax.to(mc, 1, {x:100, onReverseComplete:myFunction, onReverseCompleteParams:[mc, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like: onReverseCompleteParams:["{self}", "param2"]
     
    onReverseCompleteScope: Object - Defines the scope of the onReverseComplete function (what "this" refers to inside that function).

     

    Resources:

    TweenMax: https://greensock.com/docs/v2/TweenMax/static.to()  
    (Find the Parameters sections and click the Show More button)

     

    Happy Tweening :)

    • Like 5
  19. Either way what @Shaun Gorneau or I recommended will work. Yes i agree with Shaun you probably have a conflict.

     

    Don't forget to check your browser console.. hit the F12 key on your keyboard to see if you see any errors.

     

    Looks like you have a lot code to rummage through. You should start removing various parts of your page and slowly add code parts back in.

     

    Also keep in mind that the beforeunload is bad practice since browsers will block any scripts being binded to that event due to the abuse of unwanted pop ups.

     

    And you have the following scripts in there:

     

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/easing/EasePack.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script> 

    All you really need is TweenMax since it includes the above with the exception of the ScrollToPlugin.min.js

     

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ScrollToPlugin.min.js"></script> 

    Happy tweening!

    • Like 2
  20. Hello @brnlmco and Welcome  to the GreenSock Forum!

     

    The ScrollToPlugin also accepts a selector, not just a number.

     

    So if it was me i would add a id attribute with the value of top . And then animate up to that html tag with the id called top.

     

    <html id="top">

    So it would look like this since the scrollTo value accepts a number or a CSS selector.

     

    TweenMax.to(window, 2, {scrollTo:"#top"});

    Please see the ScrollToPlugin docs:

     

    https://greensock.com/docs/v2/Plugins/ScrollToPlugin

     

    Happy Tweening! :)

    • Like 3
  21. Hi @Wylkyn and Welcome to the GreenSock Forum!

     

    Try to inspect the transformed childrens parent that have the transform. More than likely your children are getting put on a new stacking context (layer). Which means their parent will also need to be put on its own new stacking context if you see clipping or other stacking issues. This way it can render correctly with its transformed children.

     

    Also most of the time its the original markup and position offsets setup of the position offsets: fixed, absolute and relative. They can easily be figured out by looking at the top most parents of the positional offset children. That is why you make sure that your top most parent of your absolutely positioned elements have position relative along with z-index if needed. But that will help you troubleshoot and position elements with z-index much easier.

     

    But since we cant see your markup and rendered css causing your issue.. then when in doubt.. add a new stacking context to your transformed childs parent.

    ( see what gives a new stacking context here )

     

    Happy Tweening :0

    • Like 2
  22. 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/

     

    :)

    • Like 3
×
×
  • Create New...