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. Although I have no experience doing that myself, the starting point would be getting yourself a game engine and get familiar with it. Phaser is well known and widely used. Get started with that, build smaller versions of what you want to achiever, sections of your bigger project. Then, start putting those different pieces together. Somewhere along that line, sprinkle some GSAP magice and you'll be golden!
  2. Interesting, I can see the issue you are reporting and can't really think of what is causing this. Maybe @GreenSock himself can shed some light. It could be how text behaves in SVG, it's not quite the same as in the DOM. Hang tight and we'll look into the matter.
  3. Hey mkurdziel, I'm not super experienced with Webpack myself but I wonder if you have gone over the guide in the Docs, specifically the bit that talks about "Tree shaking"? It is possible that when you're bundling up Webpack is throwing it away thinking it is not being used.
  4. Harsh! I may have been sloppy. Fine. But I am sleep deprived. It wasn't me who tried to reach for an element before it was in the DOM. ?
  5. I get an error when opening this pen in FireFox: 'TypeError: d is null' pointing a the line 24114 of TweenMax .min.js
  6. Dipscom

    Animate :after

    Nice one, it seems others have already jumped in with some suggestions.
  7. Yep, it does. It hurts until one day, it doesn't. I was struggling with arrow functions myself for a long while. Now I get them. So, now I am struggling with async/await. There's no end to the pain. Let us play this golf with a sandwedge, as we go along we'll pick bits and bobs, make a club. Before you realise it, you'll be swinging for birdies.
  8. Would it be a conditional? Sometimes being there, sometimes not? If so, wrap the line into a if() statement. // Somewhere at the start const img2 = document.querySelector("#image2") // Timeline setup const tl = new TimelineMax() tl.to( "image1", 1, { x: 100 } ) if( img2 ) { tl.to( img2, 1, { autoAlpha: 0 } ) } tl.to( "image3", 1, { autoAlpha: 0 } ) Also, better than adding a delay parameter to a tween in a timeline is to use the position parameter: // not wrong .to ("#image2", 0.5, {opacity:0, delay: 3}) // better .to ("#image2", 0.5, {opacity:0}, "+=3")
  9. Dipscom

    Animate :after

    Hi Devotee007, I'm not following what is it that you mean when you say: "Draw Meet"... Could you explain a bit more? Better yet would be if you made a thread of your own as I feel it will confuse other readers by mixing your question with the original one.
  10. Hi cbg, Our beloved moderator @Jonathan taught me long ago: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { window.addEventListener("load", function(){ // place your code here }); }); That will cause all the code nested inside the event listeners to wait until the DOM is ready and all assets are loaded. You should then be able to tween your elements as you desire.
  11. Hey MemeMaker, Yes it is possible to have multiple things being animated with GSAP. And yes, you got it right, you would want to create a constructor function that would take some params. Here's a Pen I made ages ago where one function creates different "views" - It's a bit complex but don't let it detain you, just go ahead and try creating the constructor function yourself, we can help you if you get stuck in the way.
  12. Well, there you go. Blake's tip make your wish of one timeline come true. That was definitely something I did not think of. Nicely done Blake.
  13. Strictly speaking, no. The context is exatcly the same. It is the component itself. This what you describing will never work because Vue will stop everything it is doing and wait for the done() from the appear method. No further methods will run, no other behaviour will be trigered, nothing. And, given that the done() is never called, the leave hook will never be fired. So, you cannot have execute this idea of yours. You will need to have one animation for the appear method and one for the leave method.
  14. Wait until you start nesting components... Mwahahahahahah!
  15. I'll have to agree with Carl here, it really seems to be excessive and a bit convoluted at the moment. Even though I have been following this adventure of yours for a little while now, I am still struggling to visualise what is the journey you are trying to implement. What you are doing wrong, in my view, is trying to have one parent component controlling all its children behaviour. What you really need to do is to have the children take responsability for their own behaviour and only report to the parent whenever they acomplish something. Vue already has all the behaviour you are trying to achieve baked into the framework, you're just not really tapping into it. Currently your components are nothing but HTML templates when they should be self-contained components with their own data and logic. You should stop what you are trying to do at the moment, go back to the Vue docs and digest the different patterns already designed by the framework. Because, what you are describing here is basic routing but you are not following Vue's pattern for routing and transitioning between routes. Here's a fork of your pen after dieting.
  16. Yes, perfect. That is indeed the correct move. I'm under a bit too much work right now but I'll have a look at your issue later on.
  17. Yes, you can simply attach the timeline you want to use in the component to the component's object. There's nothing wrong or dirty about that.
  18. That is indeed a phat chunk of code... It does seem to me a bit too much still. However, it does help a ton to understand where you are trying to get to. Thanks for that. 1. The reverse isn't working because you are calling the function that creates the timeline rather than telling the timeline originally created to play in reverse. 2. You send the done() down as a callback. Have a lookie at this fork. It accomplishes what you are describing as your intention. See if it helps you.
  19. For that you will want to use the Window.matchMedia() method. if (window.matchMedia("(min-width: 400px)").matches) { /* the viewport is at least 400 pixels wide */ TweenMax.to(el, 2, { x: '-100%', ease:Power1.easeInOut, onComplete: done }); } else { /* the viewport is less than 400 pixels wide */ TweenMax.to(el, 2, { x: '-400px', ease:Power1.easeInOut, onComplete: done }); }
  20. Hey MSCAU, Indeed, I am afraid you have missed the crutial point. It doesn't matter that you update your fixed_offset_top variable. GSAP only reaches out to read it when the timeline is initialized, not when it is played. Like you said yourself earlier on, it keeps those values 'in memory', it does not keep a reference to your variable. So, updating it has no effect whatsoever. Again, all you need to do is create a new timeline whenever you want to change its parameters. See a fork of your latest pen bellow with an example.
  21. In your site (not codePen) I see a "svgDoc is null" - You seem to be trying to reach for something before it is available.
  22. Yep. Less code. The key is so that Vue will know they are different components. The single transition tag is so that it knows when the component has left or finished animating. You can't have two transition tags talking to each other. I have a ton of headeache whenever I forget this and end up nesting two transition tags.
  23. Hi MSCAU! Looking at your example Pen (which is very helpful, thanks), I don't see where you are listening to the window resize event. In order for you to achieve what you are describing, you need to recreate your timelines every time the window changes size. You are correct in saying that GSAP is remembering the tween's positions - that's exactly what is meant to do. So, you have to add an event listener for the window resize and trigger override the timelines you have with fresh ones.