Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on August 15 2019

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by OSUblake

  1. On 6/28/2019 at 4:54 PM, Thinkingbox Developer said:

    Looking into the 3rd party library, it doesn't seem like they're getting the full TweenMax object but rather, an empty object. 


    For that to work, you might have to import the umd version of TweenMax. But that's just a guess.


    Is there any particular need for that library? I would just use regular promises and async/await.




    • Like 1
  2. 12 minutes ago, blaasvaer said:

    This was just partial code to illustrate that it didn’t have anything to do with () at the end. 


    Nobody said it did. The OP posted code that clearly showed the () as the problem. The code you posted doesn't. My guess is that you might have CSS transitions on some of those elements, or some of your event handlers are being called more than once for the same action.


    • Like 1
  3. 7 hours ago, blaasvaer said:

    Ok, but I have this, and it still fires immediately:


            function close_main_menu () {

                TweenLite.to('.menu-my-main-menu-container', 0.35, { height: '0', ease: Power1.easeIn, onComplete: hideMenu } );


            function hideMenu () {


    What am I doing wrong?


    For the tween in close_main_menu to run, something has to call it first. Find out what is calling it. Functions don't run on their own (technically they can, but you're not doing that).


    5 hours ago, blaasvaer said:

    It must have something to do with WHEN GSAP thinks the height is 0. Just don't know what ...


    If you think the problem is with GSAP, then comment out all your GSAP code, replace it with jQuery .css() code if needed, and run your solution again. If the problem still persists, it's safe to assume that it has nothing to with GSAP.


    • Like 2
  4. 6 hours ago, GaryD said:

    Over the weekend, I spent a bit of time trying to put together a simple version of what I am describing... but even these simple examples became quite complicated.  This is leading me to believe that the need for this kind of "pattern" is probably not as common as I had originally thought. 


    It's probably more common than you think. Everything you described sounds pretty normal to me.


    If things get too unwieldy for you, you may want to consider using a framework like React, Vue, Angular, etc. Frameworks simplify a lot of the tedious work involved with managing state.



    • Like 1
  5. What language do you speak?


    If you want to kill something by class, and you're using jQuery, then do this.


    $(".kill-these-boxes").each(function(index, element) {



    • Like 2
    • Thanks 1
  6. Just now, ninmorfeo said:

    Exactly as it is reported in the codepen js code that I posted, instead of the Draggable.get (". Box"). Kill () line; instead there should be the function that allows me to kill all the drag


    You should use actual elements instead of selectors. The box class represents 12 different elements.


    If you want to kill something in your hit test, simply kill it.




    • Like 1
  7. 40 minutes ago, ninmorfeo said:


    I thought there was a more immediate method ...

    I have a deck of 40 cards, the user chooses 10 cards using drag and drop, after which I have to make sure that the dragging function is no longer attached to the remaining cards.


    It's very easy to do, but you need to show us with a demo how you are getting those cards to kill. 


    Deleting a class from an element is a horrible solution. That can lead to poor performance and memory leaks.

    • Like 1
  8. 3 hours ago, iperryt said:

    Thank you for the fast answer, unfortunately I don't want to scale my object depending on the viewport. The scene is only one part of my creation and the main thing has to keep its aspect ratio so there's no way to use viewport based units.


    That's not at all what I was suggesting. I made that demo to show how to use non-pixel units for transforms. Using em, rem or anything other type of unit would work exactly the same.


    3 hours ago, iperryt said:

    So if you want my honest feedback, for a library so heavy (even the lite version without ease, timeline and css3?!) there's no way you can't fit unit detection and if em just don't use matrix. Or at least a plugin or something...


    I think you might be missing the forest for the trees here. The way GSAP handles transforms is the one of the biggest selling points for a lot of people, but I'll let @GreenSock know how you feel about special units.



    • Like 2
  9. 1 hour ago, iperryt said:

    Is there really no way to translate element using em values? Was searching a lot and the only info I got is that it's intentional what I can't understand at all.


    It's not ridiculous. There are technical reasons for that behavior. For example, how you would specify em units for a 3d matrix? 




    If you want to use relative units, then consider using CSS vars instead. An example using vh and vw.


    See the Pen OvbqXL by osublake (@osublake) on CodePen


    • Like 4
  10. 54 minutes ago, ninmorfeo said:

    the upadate method of the variables I used in tweenMax.to does not seem to work well with the stagger method, perhaps because it is called only once and therefore does not have a control index (it would seem).


    Yes, it's called only once. For stagger you need to use cycle. Check out the docs for cycle... (at the bottom)



    And this...



    Also, be sure to check out the learning section. 




    • Like 4
  11. Actually, I don't know what you're giving it because you didn't post any code. A really simple test to see what you're giving it.


    console.log(typeof (loadContent(activeClass.getAttribute("value"))));



    What does that print out? My spidey-sense tells me it's going to say "undefined" instead of "function". Again, this has nothing to do with GSAP. It's how pretty much every programming language works.


    This calls loadContent immediately, and becomes whatever calling loadContent returns. If it returns nothing, it's undefined.





    This is an anonymous function and will be called later.


    function() {



    To summarize, you're giving it the result of a function, and not the function itself.



    • Like 4
  12. 42 minutes ago, Jaexplorer said:

    Doesn't Work:


    You're calling the loadContent function immediately that way. You're basically doing this.




    That's how JavaScript works. It has nothing to do with GSAP.


    • Like 2
  13. 2 hours ago, Shrug ¯\_(ツ)_/¯ said:

    https://canistop.net/ ¯\_(ツ)_/¯


    Interesting site. I'm a little shocked at the Republic of Samsung, which has the fastest the internet in the world. 12.52% ?

    I mistakenly thought Republic of Korea meant North Korea at first, but then I remembered they don't have internet over there.



    2 hours ago, Shrug ¯\_(ツ)_/¯ said:

    IE is much like a roulette wheel with all red while trying to hit black. ?


    Look at all those problems Edge 76 fixes ?



    • Like 2
  14. On 6/18/2019 at 10:27 PM, OSUblake said:

    BTW, one the reasons Edge is moving over to a Chromium architecture is to allow Edge to be installed on older Windows machines. In theory, that should lower IE's usage statistics.


    Speak of the devil. An Edge preview is out for older versions of Windows. Spread the word so we can finally retire IE and make @Visual-Q happy.




    • Like 2
    • Haha 2
  15. 9 hours ago, ninmorfeo said:

    So my current problem is that I have a series of cards that enter the table in sequence with a delay of 0.3 seconds one from the other.

    In practice, the first line of the function I report below. I wish that once all the cards have entered the table, start the second statement that flip card one by one ( again with an associated delay).

    What is the best way to proceed?



    I think what you might be looking for is some type of stagger e.g. staggerFrom, staggerFromTo, staggerTo.




    See the Pen RzKdGa by osublake (@osublake) on CodePen



    • Like 3
  16. 13 hours ago, prabhath said:

    This is I trying to tell you

    please refer link



    you see last slide and first slide not overlapping. :(



    Please don't ask something else by editing your original comment. We don't get notifications for that. Just create a new response.


    Here's something similar to what Mikel showed. You will need to fix the layering though. Slide 1 will always be underneath slide 5.


    See the Pen KjaxMj by osublake (@osublake) on CodePen



    • Like 3
  17. 8 hours ago, Jonathan said:

    Sorry, I know this thread is years old, but i had to respond to this rude "cultural thing". Complaining that someone ( @OSUblake ) didn't take their own personal free time to help them with an in depth, time consuming question, with not even a whiff of being thankful or understanding.


    How dare you Blake not respond later that night while still suffering the effects of Hurricane Irma? You will always get at least one person who expects they should be waited on like your their coding butler manservant.


    Haha. I get a kick out of watching people demand free stuff, and this "cultural thing" comment definitely takes the cake.




    This is why we can't have nice things.


    • Like 2
    • Haha 3
  18. 1 hour ago, Ayman said:

    Appreciate your response , I just wanted to get a confirmation if it will be possible if I use Vue to reference a connector inside SVG and detect if it is connected and from where, if this is possible in react I assume it would be possible using Vue.js , excuse me if I'm asking very obvious questions, but I need the direction to plan how to move, appreciate it in advance.. 


    Sure, Vue should work just fine. I just said React because that's what the OP said, but any framework that simplifies building data-driven interfaces should be fine e.g. React, Vue, Angular, Svelte, LitElemet, etc.


    • Like 2