Johan ⚡️ Nerdmanship

ShockinglyGreen
  • Content count

    38
  • Joined

  • Last visited

Community Reputation

33 Newbie

About Johan ⚡️ Nerdmanship

  • Rank
    Advanced Member
  • Birthday 03/25/1983

Profile Information

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

Recent Profile Visitors

1,836 profile views
  1. HI,

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

    index.html

    main.js

    style.css

    1. Johan ⚡️ Nerdmanship

      Johan ⚡️ Nerdmanship

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

       

      Good luck!

  2. Johan ⚡️ Nerdmanship

    Error when referencing object in array as param of .set method

    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. Johan ⚡️ Nerdmanship

    Error when referencing object in array as param of .set method

    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 i=0; i<6; i++) { var blueDot = new Dot(container); blueDot.target.className = "blue-dot"; //TweenMax.set(blueDot.target, pointObjects[i]); console.log(pointObjects[i]); // Looks like a valid object to me } Un-comment line 38 and see it break. Many thanks!
  4. Johan ⚡️ Nerdmanship

    Problem when tweening both rotation and position around svgOrigin

    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 (as recommended by Blake). Seems to be "animation standards" of sorts and as an aspiring web animator... I kinda like that. Here is the end result for whoever is interested: https://nerdmanship.github.io/DMSS-Logo-animation/dist/
  5. Johan ⚡️ Nerdmanship

    Problem when tweening both rotation and position around svgOrigin

    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. (mockup) My plan is to give each particle its own TweenMax object with its own modifier function feeding x and y values based on values from the leading elements gsTransform object. Here's a simplified part of that: TweenMax.to(particle, 1, { x: 0, y: 0, repeat: -1, ease: Linear.easeNone, modifiers: { // Distributes the particles exponentially between 0 and the current position of rect x: function() { return (indexSq / countSq) * rect._gsTransform.x; }, y: function() { return (indexSq / countSq) * rect._gsTransform.y; } } }); I'm not sure, but it seems like I could use the intended x/y/rotation values from gsTransform objects to update radius/angle of a proxy to generate x/y values for each particles. The math of it is possibly too advanced for me tho, so I might have to fall back on the SVG 2 style just because I can wrap my head around it.
  6. Johan ⚡️ Nerdmanship

    GSAP on other platforms than web?

    Thanks buddy!
  7. Johan ⚡️ Nerdmanship

    GSAP on other platforms than web?

    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? <3
  8. Johan ⚡️ Nerdmanship

    Javascript intermediate and advanced learning?

    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!
  9. Johan ⚡️ Nerdmanship

    Best way to apply a modifier tween on multiple targets?

    LOL – truly an awe-inspiring creation!
  10. Johan ⚡️ Nerdmanship

    Best way to apply a modifier tween on multiple targets?

    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. ✌️
  11. Johan ⚡️ Nerdmanship

    Best way to apply a modifier tween on multiple targets?

    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. Understanding var on a fundamental level would obviously not set me back. But when I think about it that's probably my main motivation. I bet a lot of people, just like me, don't fully understand what we're doing and why. However, this tend to put me in tricky situations in which I'm forced to learn. Edit: Oh, kind of on the same topic... you said in this post that you wouldn't use mouse position for some values in a real project. Why is that?
  12. Johan ⚡️ Nerdmanship

    Best way to apply a modifier tween on multiple targets?

    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"); // Mouse object as input in modifier function const mouse = { x: 0 } // Bind mouse to update function window.addEventListener("mousemove", updateMouseObj); // Updates mouse object function updateMouseObj(e) { mouse.x = e.clientX; } // Working example with for loop for (let i = 0; i < boxes.length; i++) { TweenMax.to(boxes[i], 1, { x: 0, repeat: -1, ease: Linear.easeNone, modifiers: { x: function() { return mouse.x * i; } } }); } /* // Seems lengthy and fragile, Codepen throws an infinite loop error TweenMax.to(boxes, 1, { x: 0, repeat: -1, ease: Linear.easeNone, modifiers: { x: function(x, target) { for (let i = 0; i < boxes.length; i++) { if (target === boxes[i]) { return mouse.x * i; } } } } }); // Would wanna do something like this TweenMax.to(boxes, 1, { x: 0, repeat: -1, ease: Linear.easeNone, modifiers: { x: function(i) { return mouse.x * i; } } }); // ...like function based values work TweenMax.to(boxes, 1, { x: function(i) { return 50*i; } }); */ Thanks! <3
  13. Johan ⚡️ Nerdmanship

    Understanding TimelineMax callback and scope

    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 repeats itself tl.to(boxes, dur, { bezier: [ { autoAlpha: 0 }, { autoAlpha: 1 }, { autoAlpha: 0 } ], repeat: -1 }); // updates the contents of the boxes at a specific point in time setInterval(function() { // update stuff }, (dur*1000)/2) // Half way thru timeline duration - - Thanks Blake – always great advice and so useful resources! Thanks for both offering me what I was looking for and also a better way to approach it.
  14. Johan ⚡️ Nerdmanship

    Understanding TimelineMax callback and scope

    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 scope is changed successfully from the timeline to the newItems function by writing like so: .call(getRandomItem, [i], newItems) However, the $box variable in the callback still throws a reference error. Which is my initial problem and query. If I would declare the callback function inside newItems function then $box is referenced properly. This is what I want to achieve, but I want to declare the function outside that scope to make it accessible to other functions too. If this is too much of a general Js question I could turn to Stack Overflow and then come back here and share any results. --- Just some context to clarify why I'm asking... - I want each function to have one job (as long as it makes sense) - I want to be able to reuse functions in other functions - I don't want to repeat myself and declare the same variable multiple times This is why I run into challenges regarding scope a lot. I'm practising and researching it a lot, but I still have some missing knowledge it seems. In this case I could solve this by re-assigning $box = $boxes in the callback function, but it seems like bad practice. Especially if you'd have a bunch of variables. The code eventually gets bloated, harder to overview and manage, and more prone to bugs. If this problem is solved there will still be a timing issue. The loop will perform all of its iterations before the first timeline has reached the first callback. All callbacks will reference the same $box – the last item of the $boxes array. Edit: Removed jQuery