Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on August 15 2019

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    4,261
  • Joined

  • Last visited

  • Days Won

    439

Posts posted by OSUblake

  1. 7 minutes ago, prabhath said:

    and 1 thing, how can I animate last to fist slide?

     

    Isn't already doing that? The first slide starts out with an opacity of 0 and then animates to an opacity of 1. So at the end of slide 5, everything gets reset to an opacity of 0.

     

    If you want to replay the timeline from a different starting point, you can use a technique like this.

     

     

     

    And if you trying to create dynamic animations, this is a really good article.

    https://css-tricks.com/writing-smarter-animation-code/

     

     

    • Like 3
  2. 14 hours ago, Ayman said:

    this is a great system to develop workflow , but how we can detect "after wiring processes" that the input or output is actually wired and to what exactly , this would help in developing great workflow system 

     

    Hi Ayman,

     

    I just noticed your PM. I made these demos more as demonstration of how to visually manipulate connectors.

     

    As I stated earlier in this thread, handling the logic to make it fully functional is really complicated and beyond the help that can I offer in this forum. I think using a declarative framework like React could really simplify a lot of the complexity.

     

    And I know there are other libraries that can do this sort of thing. I would try figuring out what this tool is using. It looks like a good starting point.

    http://idflood.github.io/ThreeNodes.js/index_optimized.html#example/rotating_cube1.json

     

     

    • Like 3
  3. You don't even have a valid video.

     

    Callbacks with parenthesis are called immediately.

     

    TweenLite.to(textContent, 0.7, {
      opacity: 0, 
      delay: 2.5, 
      onComplete: this.playVideo(video) // BAD
    });
    
    TweenLite.to(textContent, 0.7, {
      opacity: 0, 
      delay: 2.5, 
      onComplete: this.playVideo // GOOD
      onCompleteParams: [video], // GOOD
      callbackScope: this // GOOD
    });

     

     

    And it kind of pointless to pass in the video to your playVideo method when it's already a property of your class.

     

    playVideo() {
      this.smokeVideo.play();
      this.smokeVideo.playbackRate = 1.5;
    }

     

    • Like 2
  4. When using a framework like Vue, you should use refs instead of selecting elements.

    https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs

     

    Your animation method is rather large. Try splitting it up into logical pieces. Searching for a class name is something you do in jQuery. You can pass arguments into your animation method so you know what button is being pressed.

     

    Now the big issue is your back button. You're adding an event listener to it every time an animation plays. When you click it, it's going to reverse every single timeline you've ever created.

     

    Consider saving the timeline when you create one. That way you can always refer to the current timeline and not some timeline that was captured on previous plays.

     

    this.timeline = new TimelineMax();

     

     

    Also, I don't understand why you need to use clearProps. 

     

    • Like 3
  5. 52 minutes ago, Visual-Q said:

    Yeah we usually do that when we make the decision to end support for a legacy browser and IE11 is just about due, but i'm going to err on the side of caution for a little longer. 

     

    I honestly think you're chasing after phantom users. Be sure to check out some of your own analytics. You might be surprised at how rare real IE users are.

     

    And browsers ignore CSS they don't understand, so there is a fallback.

     

    a {
      /* FALLBACK */
      color: #7F583F; 
      color: var(--primary);
    }

     

     

    Also, you can serve pages based on the capabilities of the browser. I do this all the time for older browsers. 

     

     

    • Like 6
  6. 3 minutes ago, Visual-Q said:

     

     

    I have no idea myself how many people use it but the us gov site which should be pretty objective https://analytics.usa.gov/ reports about 7.4% usage almost 2x what edge gets. That's still far too common for me to abandon support unfortunately. Cut that in half and maybe I can think about dropping it. Clients drive the bus.

     

    For now I'll just have to wait.?

     

     

     

    I think that might be a little skewed as the government is one the largest the users of IE. The government also has special contracts with Microsoft for continued support. 

     

    This table might be a little more realistic.

    https://caniuse.com/usage-table

     

    8 minutes ago, Visual-Q said:

     

    Been hearing that since IE5. Unfortunately clients write the cheques and consumers decide what browser to use. I have to satisfy them.

     

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

     

    BTW, one the reasons Edge is moving over to a Chromium architecture is to allow Edge to be installed on older Windows machines. In theory, that should lower IE's usage statistics.

     

    • Like 4
  7. 19 minutes ago, Visual-Q said:

     

    @OSUblake

     

    Have you been using css variables in production sites, are there any reiiable polyfills for IE11. I'd like to try them but it's got to work everywhere otherwise it's a no go.

     

     

    I don't think there are any good polyfills for CSS vars.

     

    Can you objectively justify supporting IE11 i.e. do you have any data to back up why you need to support IE11?

     

    When developing/engineering stuff, there are certain tradeoffs that you must make.  You're missing out on a lot of great features  by purposely supporting IE11.

     

    • Like 1
  8. 2 minutes ago, Jaexplorer said:

    I found this worked. But i'm rather disappointed I had to resort to this answer. Especially with css grid and dynamic elements. I thought calc would of been covered in greensock.

     

    My demo literally shows you how to use calc.

     

    GSAP cannot animate calc like you want because the browsers reports the width in pixels.

    • Like 4
  9. 53 minutes ago, Cat said:

    I know there are already other topics with the same subject opened but I've tried the solutions mentioned in there and nothing helped.

     

    You should probably mention what you did try, and how you're building site, otherwise we're just shooting in the dark here. 

     

    I would start by getting rid of that require statement. You shouldn't mix and match import and require statements like that.

     

    Also check out the docs.

    https://greensock.com/docs/NPMUsage

     

    • Like 1
  10. 11 minutes ago, AslanGoi said:

    But my question isn’t about z index positioning, I know positioning.

     

    I completely understand your question. The problem has to do with the positioning and z-index of some of your elements. Make a simple demo and I will show you. It's a CSS issue.

     

     

     

    This question has been asked more than once, like here. 

     

     

     

    • Like 5
  11. 15 minutes ago, Christoph Erdmann said:

    I built the tool to get the most out of the images. Batch processing contradicts this in that it can't matter how big the compressed images are. And then you can use one of the countless other tools.

     

    I can understand why you don't want to do batch processing, but your tool works better than other tools out of the box.  ?

     

    I guess another suggestion would be to do improve the comparison between the original and current image. Squoosh does a good job of this.

    https://squoosh.app

     

     

  12. 30 minutes ago, mosk said:

    Is there a way to share things on codepen when Vue is in the picture? Are there specific steps I would need to take? Or would I just need to build a dummy site  and link to that if i have problems / questions? 

     

    Just add GSAP and Vue to a CodePen, StackBlitz, or CodeSandbox demo, and share the link.

     

    I think checking out some of Sarah Drasner's stuff on CSS tricks might help you out.

    https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

    https://css-tricks.com/intro-to-vue-5-animations/

     

    And maybe this article

    https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a

     

    • Like 1
×