Jump to content
Search Community

akobenzu

Members
  • Posts

    8
  • Joined

  • Last visited

Everything posted by akobenzu

  1. I have updated the codepen, works well! Thanks!
  2. Hi, I was trying PixiPlugin and wanted to tune `fillColor` according to docs at https://greensock.com/docs/Plugins/PixiPlugin Codepen example doesn't work at all (dot doesn't move) if I include `fillColor`. I don't get anything in console on codepen, but on my local I get this stacktrace: Is it me doing something wrong or?
  3. I am beyond satisfied with this answer. Thank you very much my dear sir!
  4. Hi @GreenSock! Yes that was my concern — it feels weird to only create a timeline for one tween... But let's say there are two components, each has a bunch of divs, and I want to bring them to the scene in an intertwined fashion. So change autoAlpha on div1 in component1 change autoAlpha on div2 in component2 change autoAlpha on div3 in component1 change autoAlpha on div4 in component2 ... This is actually kinda the case for what I'm doing right now — I would like to say "See this thing in component1? It corresponds to this thing in component2". So it might not be `autoAlpha` to change, but maybe background color or text property or whatever, but it isn't much tweening going on in that spot. What would you suggest to be a better pattern? 1. create a new timeline for every method Component1 { function show1(){ return new TimelineLite().fromTo("div1", 1, {autoAlpha:0}, {autoAlpha:1}) } function show3(){ return new TimelineLite().fromTo("div3", 1, {autoAlpha:0}, {autoAlpha:1}) } } Component2 { function show2(){ return new TimelineLite().fromTo("div2", 1, {autoAlpha:0}, {autoAlpha:1}) } function show4(){ return new TimelineLite().fromTo("div4", 1, {autoAlpha:0}, {autoAlpha:1}) } } 2. initialize component timeline somewhere on component instance and add tween to it Component1 { const timeline = new TimelineLite() function show1() { return timeline.to("div1", 1, {autoAlpha:0}, {autoAlpha:1}) } function show3() { return timeline.to("div3", 1, {autoAlpha:0}, {autoAlpha:1}) } } Component2 { const timeline = new TimelineLite() function show2() { return timeline.to("div2", 1, {autoAlpha:0}, {autoAlpha:1}) } function show4() { return timeline.to("div4", 1, {autoAlpha:0}, {autoAlpha:1}) } } 3. define all tweens upfront and pretend nothing has been done yet, then use `tweenTo` Component1 { const timeline = new TimelineMax().fromTo("div1", 1, {autoAlpha:0}, {autoAlpha:1}, "show1").fromTo("div3", 1, {autoAlpha:0}, {autoAlpha:1}, "show3").progress(0).pause() function show1() { return timeline.tweenTo("show1") } function show3() { return timeline.tweenTo("show2") } } Component2 { const timeline = new TimelineMax().fromTo("div2", 1, {autoAlpha:0}, {autoAlpha:1}, "show2").fromTo("div4", 1, {autoAlpha:0}, {autoAlpha:1}, "show4").progress(0).pause() function show2() { return timeline.tweenTo("show2") } function show4() { return timeline.tweenTo("show4") } } Sorry if I'm getting too stubborn on getting THE ANSWER, it's just that I'm going to have several big scenes that work in this fashion (I'm creating an lengthy animation explaining a complex piece of calculation), so I would love to get your opinion on the best way to write this, so I don't have to rewrite a lot of stuff when I realize my approach was wrong. You guys are the best!
  5. Thanks for the link @PointC! So the conclusion here is that yes it is correct to spawn timeline instances without any remorse?
  6. Another approach I have thought of is to have a TimelineMax per child component, define all the possible animations there and then control it using labels and `tweenFromTo`... Any thoughts?
  7. Hi, this is more of a theoretical question, so I don't think I can do a codepen. Let's say I have 3 Vue components: parent and two children. Parent defines in what sequence children will be animating things. So in parent I want to have new TimelineLite() .add("x") .add(child1.doA(), "x") .add(child2.doB(), "x") .add(child1.doC()) or something like that. Which approach would be correct for code in these `do` methods? In my app I have more components, and I want parent's code to look like this orchestration of what must be animated in children and in what order. Right now I'm spawning a new TimelineLite in every `do` method. In children, code looks like this: function doA() { return new TimelineLite().fromTo(...); } function doB() { return new TimelineLite().staggerFromTo(...).add(grandChild.doZ()); } It's super convenient, but I'm not sure if spawning that many child timelines is good for performance or if it will become a problem with... not sure what... but maybe there are some issues with this? Child components have their own child components that also return new timelines every time they animate a piece, so I end up with a very big tree of very small timelines (and by "very small" I mean that they might be doing only one `fromTo` for example). It works like a charm though. I also looked at the GSAP homepage demo code, and I think it's written in the same manner. I started thinking about this because I wanted to move a bunch of code from the parent component into a new child, and that made me realize that this will be creating new child timelines — right now the animations are on the parent timeline, and with my approach I will spawn a new TimelineLite for things like only changing `autoAlpha` on a div. So the questions are: is this correct approach? is there a noticeable/considerable performance penalty for spawning TimelineLite? will it go well with reversing, changing timescale or doing things like that regarding this army of nested timelines? are there any other concerns? should I be using TweenLite instead? I haven't grasped the difference
×
×
  • Create New...