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. 38 minutes ago, Remi Turcotte said:

    yeah, i noticed, actually thats not me thats the proposed solution...
    noticed that, and tried "as suggested" AND the other way around, which made sense to me too (after) 

    both dont work, sadly...

     

     

    That's how I taught JavaScript to new people. Put the "what" at the top (variables), and the "how" at the bottom (functions). Named functions are hoisted, so it's perfectly fine to declare them at the bottom of your code. It can make your code much cleaner looking.

     

     

     

     

     

    • Like 1
  2. 12 minutes ago, capraruioan said:

    by debounce you mean a call that is placed inside a setTimeout, right?

     

    No, but are you using a setTimeout? That can cause problems with animations as it's not tied to the UI. If someone changes tab, the setTimeout will fire, but the animation might not.

     

    But this piece of code is what I meant by doing debounced calls.

     

    computed: {
      debouncedScrollTop(){
    	return debounce(() => this.scrollTop(), 1000)
      }
    }

     

  3. You need to save a reference to your tween outside of a function.

     

    It's as simple as this:

     

    var myAnimation = TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true });

     

     

    If you need it to to be created by a function, you must return the tween.

     

    function loopedTweenMax(){
      return TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true });
    }
    
    var myAnimation = loopedTweenMax();

     

     

    Now you can control "myAnimation" inside of other functions. Notice how I removed your onComplete. Just use repeat: -1 to repeat infinitely.

     

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

     

     

     

     

     

    • Like 5
  4. Getting rid of transforms depends on your software. For most, you can usually ungroup and group your paths.

    https://stackoverflow.com/q/13329125/2760155

     

    It's best to let GSAP handle anything transform related. I would forget about using the AttrPlugin for now. It has it uses, but usually not for moving stuff.

     

    So this will move it forward 50.

     

    logoAnimation.to('#Path_23', 4, { x: "+=50"});

     

    Or back 50.

     

    logoAnimation.to('#Path_23', 4, { x: "-=50"});

     

    • Like 5
  5. Your path is sitting at a crazy coordinate. See those two numbers inside the transform="translate()" on your path?

     

    translate(-3723.339 3675.66)

     

    That's how far your path has been moved (x y). 

     

    30 is nowhere near -3723.339. That's like out in left field. 

     

     

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

    Yeah if any of our resident geniuses want to weigh in you're more than welcome.

     

    I think this might be similar to your demo.

     

     

    And @ZachSaucier did something similar here.

     

     

     

    I don't think using a tween/timeline is the best approach for doing this. You need something a little more dynamic, like this:

     

    https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/

     

     

    They are using linear interpolation (lerp) to do the smooth scrolling. It's just a really simple calculation.

     

    I just noticed that article mentions Jesper Landberg.

    https://codepen.io/ReGGae/

     

     

    He is no stranger to these forums.

     

     

     

    I wonder if that is where he learned about lerp .

     

    cxDVPrq.jpg

     

     

     

     

     

    • Like 4
    • Thanks 1
  7. I really haven't looked into this before, but this Stack Overflow answer says the firing order will be:

    1. DOMContentLoaded event listeners of window in the capture phase
    2. DOMContentLoaded event listeners of document
    3. DOMContentLoaded event listeners of window in the bubble phase
    4. load event listeners (including onload event handler) of window

    https://stackoverflow.com/a/38517365/2760155

     

    And part of the spec:

    https://html.spec.whatwg.org/multipage/parsing.html#the-end

     

     

    • Like 2
  8. 1 hour ago, Visual-Q said:

    Wondering if it could be because the event already fired before the listener is even added mentioned here: 

     

    It might not fire if everything has been cached. 

     

    if (document.readyState === "interactive" || document.readyState === "complete") {
      onReady();
    } else {
      window.addEventListener("DOMContentLoaded", onReady);
    }
    
    function onReady() {
      // ready code
    }

     

     

    But why are you listening for that event? I'm not saying it's a bad idea, but it might not be necessary. The DOMContentLoaded event is like jQuery's ready method, which is needed because some people put their scripts inside the <head> tag.

     

    I only listen for the window load event when I need to make sure my images are loaded, like when I'm working with canvas.

     

    • Like 4
  9. 2 hours ago, Demky said:

    ps : one question; why do you use var ? aren't we supposed to use let or const with the new JavaScript rules ? (at least they told us that in school)

    any particular reason ?

     

     

    Using var isn't going to break the internet, but using let or const might. You don't want to be like this guy, now do you?

     

    Ou3MCFW.png

     

     

    Well, only on older browsers, but I get why they would teach you to use let or const. I use let/const on real projects, but I use var on these forums because a lot of people don't understand let/const yet.

     

     

     

    • Like 2
    • Thanks 1
    • Haha 3
  10. 3 hours ago, treadway said:

    And adding "plugins = [ScrambleTextPlugin, DrawSVGPlugin];" to the root component (no "const" as it causes an error).

     

    That sounds a little odd. What is the error?

     

    And are you going to do an Angular optimized build? If so, please test that out as soon as possible.

  11. See the STARS acronym here.

     

     

     

    Your order is wrong, and you should use translate instead of drawing something at an xy coord.  

     

    var originX = this.width / 2;
    var originY = this.height / 2;
    
    creative.ctx.save();
    creative.ctx.translate(this.x + originX, this.y + originY);
    creative.ctx.scale(this.scaleX, this.scaleY);
    creative.ctx.translate(-originX, -originY);
    creative.ctx.fillStyle = this.fill;
    creative.ctx.fillRect(0, 0, this.width, this.height);
    creative.ctx.restore();

     

     

     

    And more particle stuff.

     

     

    • Like 5
  12. 11 hours ago, 440design said:

    Is it possible to change scroll indication from body/html to any div element or is there any way to disable rubber-band effect?

     

    No, I think you're stuck with using the body/html for now. That also causes problems on mobile with the URL bar showing and hiding. That's why I'd really like for that smooth scrolling thread to die. It's just way too problematic, and coming up with acceptable workarounds would take too much of my time.

     

    One bit of good news is that Chrome/Android has a solution for selecting which element is the root scroller.

    https://www.chromestatus.com/features/5162094739587072

    https://github.com/bokand/root-scroller/blob/master/explainer.md

     

    Please let Apple know that you'd like have that feature.

     

    • Like 6
  13. 7 minutes ago, treadway said:

    I also added the paths in the angular.cli (after some failed tests).

     

    Do you do this?

     

     

    Remember to use files that are not modules, so no npm. Just use files from minified or uncompressed folders of your download.

     

    • Like 2
×