Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 12/08/2018 in all areas

  1. Finding a good animation tutorial is hard. Finding one that shows how to do complex interactions with GSAP and PixiJS is going to be even harder. I seriously doubt one even exists. You're going to have to learn it the same way everybody else has, through your own experimentation and research. Start out small, and don't be so ambitious. Make a bunch of pointless stuff, and build off that. There is no "right way" to do it. If you get the result you want, then it's right. Sure, there are better ways of doing things, but that shouldn't be your focus while learning. A little demo to get you started. Based on one of @PointC's first experiments with PixiJS. GSAP Resources this forum CodePen https://codepen.io/search/pens?q=pixijs&page=1&order=popularity&depth=everything&show_forks=on https://codepen.io/search/pens?q=pixi&page=1&order=popularity&depth=everything&show_forks=on PixiJS Resources https://github.com/pixijs/pixi.js/wiki/Getting-Started https://pixijs.io/examples/#/basics/basic.js https://github.com/kittykatattack/learningPixi https://github.com/pixijs http://pixijs.download/release/docs/index.html http://pixijs.io/pixi-filters/tools/demo/ https://pixijs.io/pixi-filters/docs/
    4 points
  2. Hello @LoBusker I've been in this same situation as you, I really like the GSAP + PixiJs junction and I also decided to venture using both. When I was learning I made a Pen, commenting line by line and in the end has a small demonstration of how to use the PixiPlugin of GSAP, Already do a lot of cool things using the filters as demonstrated by @OSUblake I hope it helps you in some way:
    3 points
  3. Yeah, it sounds like you may be converting that stroke to a compound path or something. If you do have a complex path with a gradient or the stroke width varies, you can draw it with a mask. You can also check out my post about exporting from AI here: Happy tweening.
    3 points
  4. Maybe you're doing it wrong. Step 1: Draw something. DO NOT do something like Outline Stroke or Offset Path. If you need to change the stroke's appearance, click on the Stroke options next to the stroke color box. It's also at the top-left part of the screen. Step 2: Copy and paste path into CodePen. Step 3: Animate.
    3 points
  5. RESPONSE: "Can you post a reduced test case showing the problem?" That reminds me of this. Programming involves staring at code for countless hours.
    3 points
  6. @PointC Very Thanx ? but great @Sahil, a prodigy of the GSAP, has no way of competing with him. Especially when typing like this (me in case):
    2 points
  7. Hi @kresogalic You can use the same method, you just need to add the animations in a hover function. If you do not use pug, I put as a comment the html structure used. Show us how it turned out. ?
    2 points
  8. Yeah - great job @Noturnoo. It's good to see you jumping into the forum more. Getting to 1,000 likes is tough when you're up against @Sahil. You'll have to type really fast to beat him. I'm not sure, but I'm guessing he types about this fast when he sees a new question on the forum.
    2 points
  9. Thanks Jack, but now there are only 900 likes left. hahahaha It is not very easy which shows how much you are all dedicated to helping Forum members.
    2 points
  10. This is the best I can do for you right now: for (var i = 0; i < 200; i++) { var p = new lib.Particle(); this.addChild(p); TweenMax.to(p, 1, {x:400 + Math.random() * 400, y:400 + Math.random() * 400, delay:i * 0.01, repeat:-1}) } particles.mp4 please see the attached fla. it should be a good start. simple-particles.zip
    2 points
  11. Haha, that's me looking for the missing comma, lol!
    1 point
  12. Ah, okay. That actually has nothing to do with GSAP or its API - that's just how JavaScript works. It evaluates expressions like that in-place. Kinda like: //these are the same... yourFunction(5); yourFunction(1 + 4); //JavaScript will evaluate 1+4 in-place, making it 5. So it wouldn't really be something to put in the GSAP docs. Cheers!
    1 point
  13. That's the first thing I noticed. You'd have to use setState to set your ticking variable, but I don't think that is a good idea. setState causes a render, and it doesn't run in sync with requestAnimationFrame. I would use a property like this. constructor(props) { super(props); // use requestId instead of a ticking flag in case you need to cancel animation frame // cancelAnimationFrame(this.requestId); this.requestId = null; } mousewheelHandler = (event) => { event.preventDefault(); var slowScroll = () => { ... this.requestId = null; }; if (!this.requestId) { this.requestId = requestAnimationFrame(slowScroll); } } Using the ScrollToPlugin with wheel events can be pretty wasteful. You're creating and killing a bunch of tweens, really only using the last one. This shows how many tweens have been created, and how many of those tweens have been overwritten. Creating new tweens can also make the scrolling jerky. Another approach. That demo really isn't scrolling anything, but there are some in this thread that use a similar technique.
    1 point
  14. Hello @kresogalic, could you post a codepen from your replica attempt? But if it is animation with text, I believe that the demonstration below will give you an idea,} there are several ways to do it, that was the one I found easier. Using the GSAP SplitText Plugin. Look: Hope this helps you. ?
    1 point
  15. Well, it was all just based on logic but it did take me a little trial and error to get my mind wrapped around certain pieces. Hm, the position parameter can be either relative (a string preceded by "+="/"-=") or absolute values (number) which I thought was pretty clear in the docs. How exactly would you update the docs? I'm open to suggestions. We have a video about it too: https://greensock.com/position-parameter Happy tweening!
    1 point
  16. Don't dragClickables... Draggable.create(document.getElementById("wrapper"), { type: 'x', // dragClickables: true, throwProps: true, bounds: document.getElementById("container") }); And set your labels as clickable... <li key="1"><label data-clickable="true"><input type="checkbox" onChange={this.handleChange}/>Check1</label></li> <li key="2"><label data-clickable="true"><input type="checkbox" onChange={this.handleChange}/>Check2</label></li> <li key="3"><label data-clickable="true"><input type="checkbox" onChange={this.handleChange}/>Check3</label></li>
    1 point
  17. Hi @Anatol New to GSAP? You can tween the timeScale directly. TweenLite.to(myTimeline, duration, { timeScale: 0 }); Much simpler.
    1 point
  18. I'm very happy for Jack's recognition, because you can be sure, the way was long and work was hard, but I see you're paying off. But it was only possible because you and moderators created a beautiful and efficient tool, with a syntax that any layman can understand. Congratz to you guys for that. And today according to the system of the Forum I become Specialist (uhulllll), and helping others is the minimum when I see that I was helped by many here in the forum. And one day I'll be Superhero too hahahhaa ? So... Happy tweening!
    1 point
  19. That's not exactly a trivial task, but here's my crack at it: I built it out with ratios and variables to make it easier to port to whatever you're doing "for real". Does that help?
    1 point
  20. You don't need to load the CSSPlugin if you're loading TweenMax as it's included. https://greensock.com/tweenmax Draggable depends on the CSSPlugin, but you're loading it twice, which seems to be messing things up. And it seems to only cause problems when you load the CSSPlugin after Draggable. PROBLEM //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/utils/Draggable.min.js //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/CSSPlugin.min.js OKAY //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/CSSPlugin.min.js //cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/utils/Draggable.min.js But again, you don't need to load the CSSPlugin if you're loading TweenMax.
    1 point
  21. Another option is to simply create a tween, jump to time(0.00001) or something, and kill() it, like this:
    1 point
  22. Is this your problem? You're selecting all the buttons, so clicking stop will also run that function. $('button').click(function(){ });
    1 point
  23. Unless I'm missing something, I don't think it will do that. I just calculate it myself. Using the next control point will point it in the right direction. let bez = MorphSVGPlugin.pathDataToBezier(path); let rotation = Math.atan2(bez[1].y - bez[0].y, bez[1].x - bez[0].x) + "_rad"; TweenMax.set(plane,{x: bez[0].x, y: bez[0].y, rotation });
    1 point
  24. We totally highjacked this thread. Your demo reminds me of a voronoi diagram. https://codepen.io/search/pens?q=voronoi&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=false
    1 point
×
×
  • Create New...