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, sum.cumo GmbH said:

    My current project is based on Vue.js. So I don't have that window object on mounted to detect the viewport size. 

     

    You can get viewport size whenever you want. It's simply window.innerWidth. If you don't have the window object, then your code is not running inside a browser.

     

     Make a very simple demo, and someone can show you.

     

    • Like 3
  2. I have to ask about this.

     

    Cont = { val: 0000000000 };

     

    Are you expecting the output to contain all those 0s, kind of like this?

     

    0000000000
    0000000001
    0000000002
    0000000003
    ...
    1710007692

     

     

    If so, that won't work for several reasons. First, 0000000000 will evaluate to 0, so 0 will be the starting number. Second, numbers that start with 0s might be parsed as an octal, so a number like 0000000021 will become 17.  See this article for more information.

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates

     

    To get it to output in a format prefixed with 0s, you will need to convert it to a string and pad it. You can do this with a string's padStart method. There's also a polyfill for older browsers.

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

     

    But first, I would first store your counter element in a variable so you don't keep searching for it.

     

    var counter = document.getElementById("counter");

     

     

    And then change the onUpdate callback to this.

     

    TweenLite.fromTo(Cont, 500, 
      {
        val: 0
      },
      {
        val: NewVal,
        roundProps: "val",
        onUpdate: function() {
          counter.innerHTML = (Cont.val + "").padStart(10, "0")
        },
        autoAlpha: 0,
        delay: 0.1
      });

     

     

    • Like 6
  3. 5 hours ago, Chris Prieto said:

    I am currently just kicking around ideas and looking for inspiration and will prolly end up back here with some mangled codepens once I get going :D

     

    What kind of timeline are you trying to do? Like an interactive one, or one you just scroll through?

     

    I think GreenSock's Twitter is a good place for inspiration. 

    https://twitter.com/greensock

     

     

    5 hours ago, ZachSaucier said:

    If you want it to trigger on scroll you could look at @PointC's new post on using GSAP with ScrollMagic (but it's not necessary to use ScrollMagic to do this - in fact GSAP may have its own way of doing it soon ;)).

     

    That's pretty easy to do with a standard timeline. Just replace time/duration values with pixel values, listen for scroll events, and BOOM! You now have MagicScroll ™.

     

    See the Pen bOGMaG by osublake (@osublake) on CodePen

     

     

    • Like 3
    • Haha 1
  4. See if this works. 

     

    import { PixiPlugin } from 'gsap/PixiPlugin';
    declare var PixiPlugin: any;
    const plugins = [PixiPlugin];
    PixiPlugin.registerPIXI(PIXI);

     

     

    I honestly don't why that would make a difference unless WebPack has changed, or maybe your config is a little different. 

     

    Can you send me a simplified version of your project? I'm curious to see why it's being dropped.

     

    • Like 3
  5. 17 minutes ago, HackGibson said:

    The project I'm working on requires me to use React Hooks. 

     

    That's understandable. I've known about hooks for quite sometime, I just haven't gotten my hands dirty with them yet, so it was a little confusing about how to set stuff up.

     

    I'm sure this is in React's docs, but can you quickly explain how useEffect works? Why is the first call like componentDidMount and the second call is like componentDidUpdate?

     

    Seeing how you did that, the demo I made above would look like this. There's really no difference besides being a little shorter.

     

    // componentDidMount
    React.useEffect(() => {
      TweenLite.set([topLine.current, botLine.current], {
        transformOrigin: "50% 50%"
      });
      setTimeline(
        timeline
          .to(topLine.current, 0.1, { y: 6 }, 0)
          .to(botLine.current, 0.1, { y: -6 }, 0)
          .to(topLine.current, 0.1, { rotation: 45 }, 0.2)
          .to(botLine.current, 0.1, { rotation: -45 }, 0.2)
          .reverse()
        );
    }, [timeline]);
    
    // componentDidUpdate
    React.useEffect(() => {
      timeline.reversed(!isMenuOpen)
    }, [isMenuOpen, timeline]);

     

     

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

     

    That's called canvas. ?

     

    • Like 1
    • Haha 3
  7. 4 hours ago, Thamizh said:

    In this, I have some doubts to implement animated SVG in my web project because it has HTML, Javascript and CSS files.

     

    If you have doubts, and your animation already works, then why are you trying to use Angular? 

     

    There are plenty of articles written about Angular, but this should help you get started.

    https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#greensock

     

     

    • Like 2
  8. 2 hours ago, ZachSaucier said:

    You can use Typescript on CodePen by clicking the cog at the top of the JavaScript panel, clicking the dropdown that says "JavaScript Preprocessor", and then selecting Typescript. :)

     

    I wouldn't say it uses TypeScript. It just compiles it. TypeScript needs a code editor that understands it, which CodePen doesn't use. 

     

     

    3 hours ago, GaryD said:

    On a related note, I'm not very experienced with codepen, and seem to make several of these kinds of small errors.  For my bigger project, I'm using TypeScript which helps my editor detect and highlight this kind of error.  And I'm also using chrome which displays a good amount of debug information after something has gone wrong.  Do you have any tips for getting this kind of information while working in codepen?  Thanks again for your help!

     

    You don't have to use CodePen. That's just what we like to use around here because it's simple and straightforward.

     

    If needed, Stackblitz is a good for TypeScript. It uses the same code editor as VS Code.

    https://stackblitz.com/

     

    Just remember to keep your demos simple. We don't want to see your project, just the problem. ?

     

     

    • Like 4
  9. Just want to point out that your notWorking example isn't working because you have an error in two different places. Fix those, and it should work the same as your working example.

     

    // BAD
    tl2.to("#circle",0.001);
    
    // OKAY
    tl2.to("#circle",0.001, {});

     

     

    And I'm also not sure by what you mean by adding a pause. Like literally pausing the timeline or delaying it?

     

    • Like 4
  10. 26 minutes ago, Thinkingbox Developer said:

    On top of that, it seems like the importing issues are also happening for other libraries too so I feel like I'd have to get to the bottom of this webpack importing issue.

     

    The only thing I can tell you is to try using version 3 of webpack. Later versions handle require and import statements differently.

  11. 12 minutes ago, rajrindra said:

    Thanks for the quick response, I tried that:

     

    import 'gsap/TweenMax'
    import 'gsap/Draggable'
    import 'gsap/TextPlugin'

     

    But still no luck :(

     

    I meant to only do that with the TextPlugin. 

     

    But yeah, putting your imports inside an array works as well.

    • Like 1
×