Johan ⚡️ Nerdmanship

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] });

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!

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/

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.

✨

Thanks buddy!

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

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!

LOL – truly an awe-inspiring creation!

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. ✌️

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?

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

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.

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