Jump to content
GreenSock

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!

Dipscom

Moderators
  • Posts

    1,508
  • Joined

  • Last visited

  • Days Won

    58

Everything posted by Dipscom

  1. I would say you are mixing settings and behaviour where you should not. The idea of a settings object is to hold references to a bunch of, well, settings... Those references can be of methods, I don't see an issue there. But, you shouldn't try to perform actions from the setting object. By adding calls to DOM methods on your settings object, it makes it completely dependant on the DOM being available at the time of your settings object being initialised. That's not something you want. You want the setting to be on its own and only when the DOM is ready, you store the references to the DOM elements on your settings. E.g. let SETTINGS = { ui: { el: undefined, ref: '.my-button', dur: 1, vars: { x: 100, autoAlpha: 0 } } }; // Then at your initialization code: SETTINGS.ui.el = document.querySelector( SETTINGS.ul.ref );
  2. If I may say something, please do not take this personally, but when I have issues breaking down the problem into a smaller problem it means I am going down the wrong path... You really should be able to slice whatever you are trying to achieve into ever smaller pieces until the problem that piece represents becomes trivial. I am having a bit of a hard time visualising your scenario but still, it really feels like you are trying to swim again the river here. As far as I understand the code is going to run in Vue, and thus, I am thinking along the lines of how to set this up with Vue as the framework. Firstly, even with a Store, you wouldn't define the DOM element to target there. If anything, you should make the component inform the store it is the chosen one. Looking at your example pen, I see several functions that all do the very same thing but you use different references to your main store. All those functions could be a single one that takes the three parameters that change. // So instead of have a bunch of functions like this function hideRect01() { console.log("hideRect01 called") return TweenMax.to( SETTINGS.ui.container.rect01.el, SETTINGS.gsapGlobals.duration, SETTINGS.ui.container.rect01.tweenParamsTo.hide ) } // You only really need function createTween(target, dur, vars) { console.log("hideRect01 called") return TweenMax.to( target, dur, vars ) } // that you would call from somewhere createTween( SETTINGS.ui.container.rect01.el, SETTINGS.gsapGlobals.duration, SETTINGS.ui.container.rect01.tweenParamsTo.hide ); What exactly is this customization that you need to have? Maybe if we can understand the job it has to do, we can figure out a nice way to do it.
  3. Hi Irine, Welcome to the forums! I am finding a bit difficult to understand your description of the issue here so, forgive me if it is not what you meant. I would say you have over eningeneered your setup a bit. You don't need all those different <transition> tags. And that's pretty much the reason why your animation is overlaping. Because all those <transition> tags are independent and they do not have the means to talk to each other. To achieve what, I believe, you intend, you need to have all your elements inside the same <transition> tag. See the bellow fork of your pen: You might want to go over Vue's transition documentation, if you haven't already, they will explain all the key concepts in detail there. https://vuejs.org/v2/guide/transitions.html
  4. Correct. Apologies as I am still a tad sleep deprived from IRL issues. I've amended the original post to reflect that lest others will be misled. CodeSandbox is absolutely fine. Just put in the bare minimum to illustrate your issue.
  5. I'm scared of StackOverflow so, let's chat here and if I what I say can help you resolve your issue, I'll post the end result there. I must say I think you are going about this the wrong way. You should not be trying to save DOM elements into the store. Think of the store as a place to hold data or state, not elements. The component that contains the element you want to target is the one that should be doing the trigerring of events or responding to things. One issue you will encounter if you keep adding DOM elements to the store is that you now have to manage their existence in the store as well as in the DOM. Say you have a component you add to the DOM. You then, have it commit itself to the store. If you ever remove the element from the DOM, you will need to make sure it is also removed from the store. Why is it that you feel you need to add the element to the store? I think a better solution is to pass down whatever animation you want that component to perform instead. If you give us a more concrete example of what you are trying to achieve, I am sure we can work something out.
  6. Uh! Uh! Uh! I know this one! I do! ✋ That is because arrow functions automatically bind the scope to their containing block. ? Nice tip, by the way.
  7. Being able to understand that tl2 is not the caller of the method but the prototype of tl2 is. And now with your more detailed example/explanation it's even more clear. Always a pleasure to be educated here.
  8. @GreenSock you know what? Today I understood your reply on this topic. At last. This is the crutial detail. It took me two years and four days to understand what this line was saying. Today being August 12, 2018. To anybody else that reads this thread and is feeling the struggle: Persevere. You will get it. One day. And you won't even notice when it clicks.
  9. Just to confirm what @OSUblake has already figure out: The data() object in Vue is for reactive data, not to store any static values. You can do exactly what he has sugested and just add any static values to the this of the component you are working with, you will be able to access it from anywhere in that component's instance. However, I am assuming you are working with DOM elements, don't initialize your timelines in the created() hook. Use the mounted() as you will not have access to the DOM in the created() call. Vue has some bluit-in $options property that you might want to use depending on your case. I haven't seen the real need for it and it does make it ever so longer to reach anything this.$options.customOption but it's there. I guess in a big enough project it would be handy. You might even want to consider not putting your timeline methods inside the methods property. You can, depending on when you need to build your timelines just attach them to normal properties of you component's instance. export default { mounted() { this.someAnimation = function() { const childTimeline = new TimelineMax(); //... return childTimeline; } this.mainTimeline = new TimelineMax(); this.mainTimline.add(this.someAnimation()); } }
  10. Hey Frunky! Allow me to butt in here. Animated displacement effect with SVG is not hardware accelerated and not performant at all. If that's the effect you are after, you will want to use Canvas (or a library that uses WebGL).
  11. Back in the day, I would do the whole 9 yards... Minify HTML, CSS, JS, SVG, compress the images, inline some of the assets. If you have a limited amount of KB, you have to squeeze the orange all the way, man.
  12. Yes! Playhead. The word had totally escaped my memory.
  13. Interesting question... I assume you are aware of much what I am about to write, I'm just 'writing it out loud' as it helps me think.. You know that you can add a nested timeline that will only play when the parent timeline 'cursor' gets there without having to set it's property to true. However you want to create a timeline, wait for an async response in the future then add it to the parent. May I ask you why? Why must you create the timeline before the async response? Creating timelines is generally so cheap you could just wait for the response before creating and adding the nested timeline. You also say the secondary timeline may be reused several times. Well, that begs another question. Are you saying you want the same timeline nested into different timelines? And somehow it knows if it's been played in any of the parents? Or do you want the same type of animation created after a certain event has occurred? For the second option, returning a timeline from a function will do the trick.
  14. Hi @OxXxigen did you consider using Cross Document Messaging to emit whatever data you want from draggable to be shared between the page and the iFrame? I think you can use Draggable in whatever place you need, track the necessary information and pass it as a message down to whoever needs to react to it. Never done it myself but from what I understand of the theory, it should be possible. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
  15. I forgot to do the hard sale on this line. Yeh man, GSAP is da bomb. Is a better option for a better world! It's performant, efficient, clean, renewable and GREEN - therefore recyclable! The world should be using more GSAP, we all need to support all GREEN and renewable initiatives in the world.
  16. Ohhhh Science! I likes science! If you're not on a horrendous deadline I'd be happy to help you work your way around what you need to do to accomplish this if you'd want to. No strings attached, just for the fun of it. The only caveat is that it would be on a drip-drip basis as I'm still a bit overwhelmed with other stuff that needs doing. Ping me a private message if you fancy.
  17. Look at your code, line 9: for (i=0; i<total; i++){ Do you understand what this is doing? All you need to do is nest another loop, similar to this for each row that you want to create. As PointC has mentioned before, this is a more general JavaScript question that you are asking, we do try and stay as focused in GSAP as possible here or we won't be able to help as many people as we could otherwise.
  18. Eh? You've edited your question without responding to my comment. In any case, my comments still relevant. If anything, it's more relevant now that you have added even more code in. Try to understand what it is that you have written in your code, what each line is doing because as is, your little red balls are animating and scaling down. You can't see it because you wave animation is going up and outside the viewport. Ultimately, your issue here is only spaghetti code (confused code) nothing else.
  19. Hi chiho! You seem to have a bit of unnecessary code in your example. Some of it will cause issues for you. Are you aware of all that this code of yours is doing? An example of unnecessary code is TweenLite.set("#header") // This not only is doing nothing but it might cause something to misbehave at some point You also have a "R" function that are not being used. Do you need it? As for rotating your lines, a simple way would be to create a container to each line, add your balls to it and rotate said container. Just like you add the balls to the "#header" div, you could create a ".line" div.
  20. That will be because you're probably missing the CSSPlugin... Have another look at the thread, the details are explained there. Or, just use TweenMax instead of TweenLite, you'll probably be better off with TweenMax anyway. Do let us know if you have having language issues, though. Such is the fate of the unworthy... ?
  21. ? So... I've been misled...
  22. Look at the two of you making the poor hyconnect confused... Mind you, he (she?) said he (she?) wanted to draw counter-clockwise... So, more control is needed over the paths. You can write the SVG code for any shapes you want if you spend the time learning the commands. For simpler shapes is actually better to write the path, more legible. For complex ones, no way, jose. Go use a software that's been designed to do it. Here's a little example. It's not the most round of circles but it will give you an idea. For more detailed info, look up MDN docs and/or a bit of online searching will yield plenty of results. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
  23. If you think I speak any french... Go on and keep that illusion going. ?
  24. Hello! Have a look at this thread here, you are making the same mistake that's discussed there: Now let's turn on google translate: Bonjour! Jetez un oeil à ce fil ici, vous faites la même erreur qui est discuté ici:
×