Dipscom last won the day on October 27 2017

Dipscom had the most liked content!

Dipscom

Moderators
  • Content count

    1,022
  • Joined

  • Last visited

  • Days Won

    32

Everything posted by Dipscom

  1. GSAP with Create React App

    If you are someone like me and has ZERO experience with React, Facebook's Create React App, webpack and the sort, you might want to have a read about my adventures working in a live project here. As stated I'm working in a project that uses the Create React App - The idea is quite cool. They hide away the vast majority of the config and common files that end up being clutter when working on a simple project. The upside is that things are super simple and look really neat. The downside is that for someone who has no idea what one's doing, it's very confusing. I will try and put a little summary of what's happening so that my pain can be shared. Day 1: Read this post from cjke.7777 and digest it completely, it's full of very important and useful information. Don't include GSAP in your bundled files, there's really no reason for that. GSAP is hosted in a CDN, make use of it and all of its benefits. Pro Tip from OSUblake, you don't need to do anything else after including the CDN. No 'require', no 'include', nada. Gotcha 1 - The linter included in the Create React App will throw a hissy fit and fail to compile because TweenMax is a global variable. In their docs they suggest two options: 1) Creating a new variable directly from the window Object (please don't). 2) Adding a comment line for the linter to ignore (the lesser of the two evils, in my view). Your tween will end up something like: TweenMax.from(this.el, 1, { // eslint-disable-line autoAlpha:0, }); Don't worry about the 'this.el' bit, I'll explain it later. After all, I still need to finish this project in time. Bonus reading (Also from OSUblake): https://medium.com/@cheapsteak/hi-tadeouy-thank-you-for-the-kind-words-44dfc75190b8 https://medium.com/@cheapsteak/reusing-reacttransitiongroup-animations-with-higher-order-components-1e7043451f91 Just don't worry about using findDOMNode as cjke.7777 points out in his post.
  2. setting perspective ignores z-Index

    Hummmm. I've got no idea what game is this that you are refering to. I do have a vague impression of what you are trying to achieve. From what you are describing, nothing springs to mind as a way to update the perspective-origin in this scenario. However, what does spring to mind is the question: Are you using the right tool for the job? Would you not benefit from a different setup? Or even a different technique? If you are going to recreate a game and want to use 3D perspective, would you not be better off with a library that's designed for that? You could try having your '#tableContainer' not moving, that would stop you having to change the perspective-origin but that would mean you having now to translate all the children inside it. So, maybe a 3D specialist library?
  3. Tween Multiple Divs on Click

    Hello @krs! Well, I wouldn't claim that as being 'pure css' as you're toggling the classes with jQuery. There are dozens of ways to animating all divs when one is clicked. You could target a specific class they all share, target all divs that are children of another, or any other way you could think of. But taking the example you have given on the previous post, I've made the following, see if that helps:
  4. setting perspective ignores z-Index

    Can you describe what is it that you are trying to achieve and why is it that you need to apply perspective on a bunch of TD's? We kinda have fun banging our heads against a wall of other people's problems.
  5. setting perspective ignores z-Index

    Yes, I'd fiddled with that as well. It did bug me that they could render the page like that but it would struggle when I tried importing 3D models.
  6. setting perspective ignores z-Index

    It used to have all sorts of tools in it. WebGL, Shaders, the kitchen sink... I think a lot of the unused bit were tucked away or are no longer available due to lack of use. I need to get the habit of using their developer edition to dev on as well. There seem to be a ton of extra goodies there for the likes of us.
  7. setting perspective ignores z-Index

    Ohhhhhh, that's news to me. I was aware there was something of the sort in Firefox but not in Chrome. I have moved back to Firefox these days, trying to do most of my developing there and only using the other browsers to bug hunt anomalies. Nice tip, Blake.
  8. setting perspective ignores z-Index

    It's a bit more complicated than that... (And the 9999 alone shouldn't work) First I'd say, read both links @OSUblake has posted, they are crucial. Then, read the docs about perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective https://css-tricks.com/almanac/properties/p/perspective/ The key gotcha is the fact that setting 'perspective' in CSS (in this case GSAP) creates a new stacking-context on the element but visually affects the children. You have a perspective set on the 'td' element of your table, that creates a stacking context on each 'td' element that is independent from each sibling. All children of those 'td' are contained within each context and can't possibly raise higher than it's parent's siblings. Think of each sibling stacking-context as a mini universe in its own, independent and unaware of others. As it pains me to say, it is expected behaviour. I am not sure what is the end result that you are after but, in order to have the blue box on top of all the other green boxes and have some perspective distortion, you need to plan where your stacking context is going to be. Here's a fork of your pen with a hack to make it work. ps (opinion piece): It really is silly to be putting z-indexs on the thousands.... If your stacking context is wrong, it won't make a difference if you have z-index:1 or z-index:3,000,000 - If anything, it's a lot easier to keep track of the z-index if you are in the single digits. If you need more than 10 levels within one context, you might want to re-think your strategy.
  9. Tween Multiple Divs on Click

    Hi @krs, Welcome to the forums! It seems to me you want the ability to toggle tweens. Have a look at this thread here, it should give you the guidance you need: Happy Tweening!
  10. how show tweenmax.js from local if cdn fail?

    Sorry @mrsam I wasn't clear on my point (too early in the day...). I did not mean to specifically use the YepNope library, but to sniff out a response to the call. You can make use of Promise and the Fetch api. Sorry I can't be more specific - I haven't had to sniff out CDN failures myself so, I'm talking on a totally theoretical platform.
  11. Business Green plugins with Angular / NPM

    I should have said that idea of putting on a vendor's folder is just a concept - to not manually put files into node_modules yourself. You need to take in consideration how your build tool and framework compile stuff. In my case I am, usually, working with Brunch.io and VueJs where I know how to setup such 'vendor' folder without breaking the compiling.
  12. how show tweenmax.js from local if cdn fail?

    I'd say the elder technique still holds true.
  13. Hi @olivero, Welcome to the forums! I'm sorry but I cannot reproduce your issue, I'm using Safari 11.02. Does it happen on your browser 100% of the time or is it intermitent?
  14. Oooops ...

    Why does it reminds me of somebody here with a moustache?
  15. Click on screen then slide out

    If I understand correctly, here's the first draft to get you started.
  16. "from" animation wrong behavior

    I'm positive that if you castigate the demo enough it would revert to its original ways.
  17. DrawSVGPlugin with Ionic3

    I have zero experience with Ionic but I think we might be overcomplicating things here with all the imports and such. I mean, the DrawSVG plugin doesn't need compilation and GSAP doesn't need to be told to initialise it so, as an attempted patch-up solution, how about having it bundled at the begining of your main JS code? You can use the minified version you said you found for that. So it's available gloablly and you wouldn't need to import it on any of your module files. As for your TypeScript error... I can't help you with that either. Maybe @OSUblake will have an idea.
  18. DrawSVGPlugin with Ionic3

    I would recommend not placing the DrawSVG files in your node_modules folder because if you ever need to initialize this project on another computer, it won't be copied over from your repository automatically when you run your 'npm install' command (assuming you are not commiting your node_modules into your repository...). Instead, have a separate folder just for that sort of thing, I usually call mine 'vendors' and drop them there.
  19. Hi @DD77! I'm moving our chat back to the public forum as I am no longer messing aroung with the countdown. ( For anybody who were not around during the time, I'm refering to the bellow thread. Yes, I did make too much of a fuss for no particular reason... Soz) So, to the matter at hand. My understanding of what @DD77 needs help with is to have a horizontal scroll that triggers some animation as you move it along. His sample pen is the following: In our private conversation I offered the bellow as a starting point: No animation, just the CSS to have a bunch of horizontal sections. I have no comercial experience with ScrollMagic, I'm going to be reading the docs and making it up as I go along, so, if anyone has anything to add, please do so. Here are ScrollMagic examples: http://scrollmagic.io/examples/index.html and the documentation: http://scrollmagic.io/docs/index.html as guides. What we'll do first is as simple as a test we can do.
  20. Horizontal Scroll with ScrollMagic + GSAP

    The requirements were/are quite vague to be honest @PointC - We're both a bit on the blind side here. It's kind like leveling up challenges. So, the next level is the bellow: It's not super smooth when you link the progression of the tween to the actual scrolling but I suspect that's down to how much ScrollMagic is throttling the calls (as it should...). Any scrollMagic experts care to share some knowledged upon the less fortunate souls?
  21. I see no snow fallin'...
  22. GSAP: 1000 Posts

    This commaClub thing should become a real thing...
  23. GSAP: 1000 Posts

    That could be a theme when I get back into particles and physics-based animation... I have no idea what you're on about. There's a legal disclaimer stating that I am the rightful owner of all of that code.
  24. GSAP: 1000 Posts

    Ladies and gentlemen... Boys and girls... Cats and dogs... One Thousandth Post. I will say this was far more work than it needed to be. I've actually sat on my hands without posting for about, I think, two months because I couldn't get the spare time to sit down and make a celebration pen. And then, Pedro being Pedro, he goes full-on megalomaniac with this idea to make a countdown with a different pen for each of the remaining posts. And why not do that while also working full-time and still redecorating the house? Well, it would mean not doing a one thousand posts celebration pen or, not being able to hang around here and interact until all was ready. Those were the only two options, really. Doing something simpler, abandoning the original idea, was totally out of the question. Wasn't even considered, really. The moral of the story? There will be no more celebration pens from mr. @Dipscom - not a chance. I'd rather be here chatting away. Another reason is bellow. I saw this via the notification email - which I read the summary when the mobile pinged with the email and my heart... Oh dear me. It sank. To depths not known to men. Retribution is a nice word... And shall be part of someone's future. Happy Tweening EveryOne!