Jump to content

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

Johan ⚡️ Nerdmanship

  • Content Count

  • Joined

  • Last visited

Community Reputation

34 Newbie

About Johan ⚡️ Nerdmanship

  • Rank
    Advanced Member
  • Birthday 03/25/1983

Profile Information

  • Gender
  • Location
  • Interests
    Surf, design, games & tech

Recent Profile Visitors

3,043 profile views
  1. HI,

    can you please help me wth this animation i am unable to perform this




    1. Johan ⚡️ Nerdmanship

      Johan ⚡️ Nerdmanship

      Please make a codepen and post your specific question in the forum.


      Good luck!

  2. Ah perfect – thanks a lot, Jack! And by including a css wrapper GSAP won't change the objects, I presume. TweenMax.set(blueDot.target, { css:pointObjects[i] });
  3. This looks so simple but I just can't figure out what the problem is. I'm creating a bezierPlugin demo and use an array of point objects both to define the bezier path and to distribute visual guides. TweenMax throws an error `invalid css tween value: [object Object]` like the objects aren't valid, but everything looks fine to me. The loop and pen works fine with any hardcoded object such as `{ x: 100, y: 100 }`. Why is the referenced object invalid in the `TweenMax.set()`? // Create dots and distribute them along the bezier path for (var
  4. A million thanks, Jack! I went with the less optimal but to me conceptually familiar method. There are so many new concepts to me in this project, so adding another one – even if it's a small one – felt daunting. The methods I ended up using were good enough tho and are silky smooth on all devices I've tested on. Very pleased! The code is messy but it's working. For sake of learning tho I'm gonna refactor it as soon as I get the chance, and I will definitely use your suggested solution when I do. I sense there's some very usable concepts in there, and I recognise some from Coding Math (a
  5. Thanks for some pretty code and your precious time, Jack! ❤️ I need to touch up my trigonometry to fully understand what's going on. At this point I can't determine if this will solve my problem or not. The actual project has large parts of it developed already and I depend on a solution in which I can use the x and y values from one elements gsTransform object and the rotation of another. In the actual project the particles will not be explicitly animated but respond to the coordinates of the colourful rectangles and the rotation value of a group element surrounding them. (m
  6. Every dev around me get excited when I show them what can be done with HTML5 and GSAP. Most of them start playing with the idea to apply the same concept of programmed, and potentially data driven, animation to whatever project they are working on. Very often I get the question if you can do the same things for other platforms, i.e. native iOS or android apps, and I simply don't know how to answer. My initial thought is that you can use GSAP wherever you can use JS, but I don't have enough experience from projects on these platforms. Any experience, thoughts or recommendations on this?
  7. I learned a lot big and small from exercises such as Wes Bos' Javascript 30: javascript30.com/ I also enjoy watching conf talks on all different Js topics. It goes beyond syntax and coding techniques, and slowly but surely provides a great general knowledge on how JS things work and why. This in turn gives you a really good understanding on why devs do like they do. I.e: What the heck is the event loop anyway? I also follow people on youtube and listen to their opinions and watch them code live. I.e. FunFunFunctions GLHF!
  8. I worship your input as a divine scripture. Thanks again for sharing! Since you shared the technique of map func, modifiers and storing values in an object I've not only been writing better code, but thinking more creatively about animations. I don't see many reasons not to use modifiers at the moment. I recommend anyone reading to check out Blake's forum posts about norm, lerp and map functions here, how he updates a tween with modifiersPlugin in this pen and how he combines map and modifier in this pen. ✌️
  9. Blake, what a surprise! Let me know if you ever need a kidney. I noticed this in the project I'm working on, and honestly I had no idea "let" created a new scope on each iteration. After knowing this and studying more of your mentioned pens, I rewrote my code and, as usual, it works better. My brain hurts tho. To me, using the let/const is a first step into ES6 and a little affirmation to myself that I'm not afraid of new syntax (which - of course - I am). Whenever I use var, I feel like I'm resorting to my comfort zone where I develop less. This is clearly not rational. Understan
  10. Greetings! I'm using Blakes clever method of using a mouse object to update a modifier function (pen), but in my case I have multiple targets. It feels like a pretty common use case, so I assumed there's a good practise to do it. In the example I want the boxes to follow the mouse movement depending on their respective index in the collection. The pen works, but I wonder if there's a way to do it without a for loop, like the way you can with "function based values". This is what I've got: (pen) // A collection of five boxes const boxes = document.querySelectorAll(".box"); // Mou
  11. Thank you so much for your thoughts and pens, guys! Great advice, Dipscom – thanks! Of course I ran in to this problem and my solution was to kill the interval on window.blur and recreated it on window.focus. It works well, but it doesn't feel robust enough. This (code below) was what I could imagine from your suggestion, but I realised that it probably would end up out of sync in the tab use case. It also kinda does the same as the previous version, only looping thru the array differently. What did you have in mind? var boxes = []; var dur = 2; // create one timeline that
  12. Thanks Carl! Sorry for the private settings, I wasn't aware it was limiting in that sense. It's update and public here: http://codepen.io/nerdmanship/pen/bBbbwE The brackets did do the trick with passing the i. It was sloppy of me and I haven't had this issue in other projects. I discovered that the callback was working only because $box was leaking to the global object, since I forgot to declare it with "var". I don't want that, I want to keep the variable in the local scope. So I'm still wondering about scope. By logging this from the callback function I can see that the