Dipscom last won the day on May 21

Dipscom had the most liked content!

Dipscom

Moderators
  • Content count

    1,172
  • Joined

  • Last visited

  • Days Won

    37

Dipscom last won the day on May 21

Dipscom had the most liked content!

Community Reputation

1,928 Superhero

3 Followers

About Dipscom

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling
  • Location
    London

Recent Profile Visitors

7,518 profile views
  1. Dipscom

    GSAP .call() usage

    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.
  2. Dipscom

    GSAP .call() usage

    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.
  3. Dipscom

    GSAP .call() usage

    @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.
  4. Dipscom

    Get timeline that is contained within another function

    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()); } }
  5. Dipscom

    How to reset animated object to default state

    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).
  6. Dipscom

    How do you optimize your banner ads?

    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.
  7. Dipscom

    Circle distortion animation

    Erm...? Pretty illustration...
  8. Dipscom

    Nested timeline remove pause automatically when nested

    Yes! Playhead. The word had totally escaped my memory.
  9. Dipscom

    Nested timeline remove pause automatically when nested

    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.
  10. Dipscom

    draggable with friendly iframe cause error

    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
  11. Dipscom

    How do I reset my animation

    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.
  12. Dipscom

    How do I reset my animation

    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.
  13. Dipscom

    wave banner animation background

    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.
  14. 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.
  15. 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.