Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 01/14/2019 in all areas

  1. The best thing to do is read as much as the documentation as possible I think you'll be surprised at the level of detail that is put into the explanations. However, the primary focus of the docs is on how to use the API. Discussing the overall design and decision-making process that went into the API is probably better suited for an article some day. FWIW there is an extremely detailed article discussing how GSAP uniquely handles animating transform values that will be launched in the not-so-distant future. Also, go through the blog posts, even ones a few years old. https://greensock.com/blog/ Lots of important info in those. --- I just guessed for the 0.2 second delay. A set() has 0 duration so in order to read the value that was set, it's best to wait for the next tick of the engine (which runs at 60fps) to be able to read it. I could have put a call() in the timeline also at a non-zero time as well.
    2 points
  2. To change an attribute use the AttrPlugin https://greensock.com/docs/Plugins/AttrPlugin It's included in TweenMax midi_tl.set(document.getElementById("__midi"), {attr:{fan:360},width:100})
    2 points
  3. Interesting. I was looking at Blender as a possible solution. I've almost got what I needed using the "Pattern along Path" effect in Inkscape and the MorphSVG plugin. Although I'm having some issues with odd morphing behavior. I'll probably post about that soon. Thanks!
    1 point
  4. You're welcome. Well is just a pattern that you'll see quite a bit here in the forums and some bits I gathered throughout my time here. First unless is necessary I always create Timeline instances paused, because otherwise the time is already running and the playhead is moving forward. Granted, normal JS execution to add the instances might take only a few milliseconds but in some cases that could cause some unexpected behaviour. Now I'll jump forward to this: tl.reversed( !tl.reversed() ); Reversed is a getter/setter of the reverse status of a GSAP instance. By default all GSAP instance are created and going forward, therefore by default reversed() returns false. Since I'm using reversed() as a setter (by passing the opposite value) I need that the reverse status of the timeline to be true. Now since I created the timeline paused the playhead won't go anywhere unless I change that, hence I add a reverse() call at the end of the timeline. Now the timeline is paused, so I'm telling the timeline: "Go from being paused to play backward", but since the timeline is at zero seconds and negative time doesn't exists (although @GreenSock and/or @OSUblake might be working on that ) the timeline stays put at zero seconds and the reversed() value is true. Then on the first click (or any other event that triggers it) I toggle the reversed() value to false, which tells the timeline to go forward and so forth. Basically is just a way of doing it without the conditional block in it, which saves a tiny amount of time and a couple of lines of code. Hopefully this makes things more clear about it. Happy Tweening!!!
    1 point
  5. Thanks a lot. That works exaclty how expected. Just to clarify. Why do you add the reverse() function at the end of the mounted hook? Will it add the ability to reverse the timeline in general? If I'm not mistaken the methods is the same as. if ( !this.textTl.reversed() ) { this.textTl.play() } else { this.textTl.reverse() } Am I correct?
    1 point
  6. Hi, I don't know if this is the ideal way of doing it, but the best approach I can think of is to create a reference to the timeline instance in the data() callback: data() { return { tween: new TimelineLite({ paused: true }) }; }, Then in the mounted hook, add the instances to the timeline: mounted: function() { this.tween .to(this.$refs.appLogo, 2, { rotation: 360 }) .reverse(); } And finally in the methods object define a method to play/reverse the instance: methods: { toggleLogoTween: function() { this.tween.reversed(!this.tween.reversed()); } }, Here is a live reduced sample: https://codesandbox.io/s/l261n378km Happy Tweening!!
    1 point
  7. @Jonathan Actually it just ended up begin the lack of perspective. It worked fine with `getContext("2d")`. Thanks for the advice though!
    1 point
  8. I'm traveling at the moment, but I'll look into this when I'm back. Thanks for the detailed info and your patience.
    1 point
  9. If anybody is interested in learning shaders, here's a good place to start. https://thebookofshaders.com/ Some of the functions available. http://www.shaderific.com/glsl-functions/ And a "simpler" demo to play around with.
    1 point
×
×
  • Create New...