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
  • Content Count

    3,546
  • Joined

  • Last visited

  • Days Won

    133

Jonathan last won the day on June 18 2019

Jonathan had the most liked content!

Community Reputation

5,290 Superhero

About Jonathan

  • Rank
    Super Moderator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    United States
  • Interests
    Traditional Animation, Computer Animation, Drawing, DJing, Mycology, Traditional Chinese Medicine, and Herbalism

Recent Profile Visitors

23,482 profile views
  1. Jonathan

    Laggy animations

    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.
  2. Jonathan

    Laggy animations

    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.
  3. I feel ya.. but you gotta love Chrome, the new IE
  4. Jonathan

    Laggy animations

    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. //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!
  5. Well that is a different issue, but my statement on the gsap.to() syntax is correct and not, not true
  6. 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.
  7. 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. https://codepen.io/jonathan/pen/dyPKdwX Happy Tweening!
  8. 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: https://codepen.io/jonathan/pen/GRRbVzx?editors=1010#0 Happy Tweening Resources: null: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null
  9. 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
  10. 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
  11. 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
  12. Jonathan

    Text Glow

    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
  13. Hi @DesignCourse and Welcome to the GreenSock forum! Also keep in mind with the CSSRulePlugin, that you want to keep using the old single colon syntax ( : ) when using the pseudo-elements of :after and :before like in your codepen. This way you don't have to worry about issues if you use the new double colon syntax ( :: ) of pseudo-elements. Happy Tweening
  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.
  15. Hi @Parina and Welcome to the GreenSock Forum! That link you provided is behind an htaccess password. So we cant see anything 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
×