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. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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!
  7. 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.
  8. 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.
  9. 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?
  10. Dipscom

    Oooops ...

    Why does it reminds me of somebody here with a moustache?
  11. If I understand correctly, here's the first draft to get you started.
  12. I'm positive that if you castigate the demo enough it would revert to its original ways.
  13. 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.
  14. 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.
  15. 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?
  16. 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.
  17. Dipscom

    GSAP: 1000 Posts

    This commaClub thing should become a real thing...
  18. Dipscom

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

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

    GSAP: 1000 Posts

    Twooooo! edit / carl / you gotta click it
  21. Dipscom

    GSAP: 1000 Posts

    Four! (For @Sahil)