Jump to content

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Dipscom

  1. That'll teach you. And where are those teams? I look left, right and center for Vue contracts and all I see is React Must be a 'Murica thing.
  2. Dipscom

    GSAP and Canvas

    Hey gone3d, Welcome to the forums! The ticker is a separate object, not connected to the tween itself, if you want to stop it from firing, all you have to do is remove the event listener. From the docs: //add listener TweenLite.ticker.addEventListener("tick", myFunction); function myFunction(event) { //executes on every tick after the core engine updates } //to remove the listener later... TweenLite.ticker.removeEventListener("tick", myFunction); Side note: I know you got the code from this thread, but it's always best to start your own thread for questions that are not related to the original one. It also makes it easier for others who might have the same question find what you have asked. Happy Tweening!
  3. Dipscom

    SVG animation

    Anything else that might be important? ?
  4. Dipscom

    SVG animation

    Is anything else different?
  5. Dipscom

    SVG animation

    Close but not quite. What's different from what you wrote to the bellow? function doCoolStuff() { if (toggle === 'closed') { anim = new TimelineMax(); anim.to(targets[this.index], 1, { y: -50 }); } }
  6. Yep, I think that was the rant I saw that made me think that. Also, I have seen Paul Lewis video when it came out. But, but, but, isn't he a Google employee? He's part of the conspiracy. HAVEN'T YOU DONE SOME WORK FOR GOOGLE?!?!?!?!? You're one of them! SHOCK! HORROR! Bet you're hacking into my machine now to erase me and put a bot in my place! ...and off we go hijacking another perfectly normal thread...
  7. Dipscom

    SVG animation

    Your issue is still the same. You still have two separate event listeners with their separate functions doing separate things. And you are still not controlling the state in your jQuery function. I know it will look like I am being mean on purpose but I am not. I really, honestly am not. I am trying to point out the basics you seem to be missing in your knowledge. I will circle back to a question that I have asked you before: - And have also the given asnwer: Again, you need to understand what is happening here. Otherwise you will continue to need others to write code for you. Finally, as a mercy, here's another hint. Your newTarget cannot be the same as your oldTarget when you click on the button.
  8. Aren't web components another Google plot to takeover the web? I heard it somewhere, it think.
  9. May it be very known, there's going to be no friendly left once I am done with the heretic.
  10. Not quite, you wouldn't create a Tween until you needed. This is how I would go about it (have in mind I have no idea about your codebase, what you're using or how it is organized, this is just a suggestion) this.pinners.forEach(slots => { this.tweens[`pinGemScale${i++}`].scaleUp = this.scaleMeUp; }); // Somewhere else this.scaleMeUp() { const trg = this TweenLite(trg.scale, 0, { x:0.4, y:1, ease:Elastic.easeOut.config(1.2, 0.2), }); } But even if you were to go with the code you have suggested, GSAP is super optmized, the vast majority of times you experience jank, it will be because of the rendering of the screen, not the tweening. And, unless you are tweening hundreds/thousands of objects, it's unlikely that you will see any significant difference in performance.
  11. Dipscom

    SVG animation

    if newTarget is the same thing and has the same value as oldTarget, stop here, return nothing to whoever called the function. --------------- You know we want to help you DD77, we like helping people out. But there's only so much time we can dedicate to one single individual. We tell everyone here that we keep this forums GSAP focused, otherwise we would be overwhelmed. Of course, we do also answer the odd generic JavaScript question here and there because we can. What we cannot is teach every little thing that exists on complex setups. The issue you have at the moment, has nothing to do with GSAP, it's simply how you are controlling the state of your 'application'. The solution is the answer I gave you earlier. It is now on your hands to understand the code you wrote yourself and adapt it to suit your needs. You need to go over your own code, understand exactly what each line is doing. Until you actually understand the code, you will be struggling without knowing what to do. Try smaller things first, then put those smaller things together to make a bigger thing.
  12. Dipscom

    SVG animation

    Given the context of the bug you are hunting and the user behaviour you are mocking, what is this specific line of code inside doCoolStuff doing? if (newTarget === oldTarget) {return;}
  13. Really? How strange. Do you actually use a class named "circles"? It doesn't appear to be the case. **The dangers of copy/paste coding** Always, always, always, young grasshopper, type your code.
  14. Well... I saw that one. I'd say you were being a bit overreaching there.
  15. Ohhh so close! We're getting there Ainsley. Didn't you say you wanted the colours to revert when the nav bar closed? As in, the timeline has finished its animation in reverse? // You wrote: var navTL = new TimelineMax({paused: true, onComplete:clear}); // The gotcha is that you want to 'clear' onReverseComplete var navTL = new TimelineMax({paused: true, onReverseComplete:clear}); That should do the trick.
  16. Dipscom

    SVG animation

    Right... I see. Well, let me try to walk you here from being stumped towards your bug into freedom. When you click on the button. What are you telling your program to do? I see two events being triggered: 1) doCoolStuff() is being called from the event listener that's added in line 14 of your code. 2) An anonymous function being called from one of your jQuery handlers on lines 101, 107, 113 and 121. Now, ask yourself, do you understand what's going on inside the doCoolStuff function? And equally important do you understand what is going on inside your anonymous functions being independently triggered via your jQuery call?
  17. Dipscom

    SVG animation

    Without seeing your code, I can't fanthom what's going wrong. I don't even know if you are following my suggestion or if you are still working on the same code as your last listed Pen.
  18. Hey jonForum, Do you want to have all blue boxes opened at once or just one at a time? I think if you just want one at a time, wouldn't it be better to asign a method that creates but doesn't return a single tween on over, rather than asigning all those tweens on all those elements?
  19. You will want to clear the props after the animation is reversed. Not before. Try something like: // wherever you create your timeline var navTL = new TimelineMax({onReverseComplete:clear}); function clear() { TweenMax.set('.circles', {clearProps:'backgroundColor'); }
  20. Damn sniped during my sleep. I'l get you back Rodrigo, I'll find a React question and throw an answer there, you wait. So, Chris, the heretic React Dev is correct - the ideal setup would be to have some sort of shared state that would trigger the animation on the target component. But given that you want to trigger animations with a click I would assume you can, in theory, do that. It will boil down to whether or not you are using the correct moment to querySelect your element. If you give us a reduced case demo of what you are trying to achieve, we can take it apart and see what's going on.
  21. Dipscom

    SVG animation

    Ok, let us know how you get along with that.
  22. Hi Ainsley, It's always preferable to have a reduced case demo as it helps us tinker with your setup and spot any relevant code that might be causing an issue. Here, I think I can guess what's going on. Bear in mind I have no experience with jQuery, this is all guesswork on what's going on. You see where you wrote the code for the hover on the individual dots? There you are creating new tweens, and GSAP will record those values in the DOM element. So, when you over out of the button you're telling it to have a background color of (#232021) but at no point when closing the whole navigation bar, you tell it to clear those transformations. The easiest way that I can think of to solve your issue is to clear all of your buttons of any inline styles created by GSAP from your elements with ClearProps (look close to the bottom of the page).