mvaneijgen

@akapowl yes I knew. I had commented it out, but wanted to show that I was aware of it. This it it! What needs to be inside the `stagger` and what would be outside the object is something that always tips me up. Also what I have access to within the `onUpdate` functions with `this` is something I find perplexing , because if I would check the console.log I find the property `._targets`, but you are accessing it via a function `.targets(), how did you find, can I find it somewhere in the docs? @Carl thanks, I'll check it out.

I'm trying to have a number animate to from 0 to a specific number as many have already ask here before, but I have the feeling all the questions before me where asked with GSAP 2.x because I'm finding a lot of sample code with `TweenMax` and when I read that I'm already turned of from reading further. I have an example working and feels like it this would be the GSAP 3.x way of doing it (found this also somewhere here) But now I want to add decimal separators to make it easier to read, but here I'm at a loss. I see a lot `onUpdate` functions, which I also have used, b

Hi @Samsky It is hard to understand what your code needs to do, because when disabling all javascript nothing is visible. What I would recommend is first styling everything with just CSS and placing it where in needs to end up and when that is done adding in the Javascript, right now everything is `width: 0%` and absolutely hidden which makes the CSS fight with GSAP and this doesn't have to be the case. Also you are using a really old version of GSAP (version 2) which is much harder than the new version 3. I would also suggest taking a look at some tutorials on youtube that are of

Hi @Sirisha Pendem I've found a other topic with the same problem and there is an `reduceWhiteSpace:false` property, which can be found in the docs https://greensock.com/docs/v2/Utilities/SplitText And here your pen with the property set https://codepen.io/mvaneijgen/pen/wvzYQzm

Hi @Pete G you where missing some scripts in your Javascript tab, you need to load GSAP and ScrollTrigger before you can use them in Codepen.io I've tweaked your pen a bit to make it work how the video explains it. I've there for removed you're floats, because I think GSAP doesn't like floating elements, also as a beginner I would stay far away from anything float based. Take a look at Flexbox and CSS Grid (https://flexboxfroggy.com and https://cssgridgarden.com) these are just much easier to create and maintain. https://codepen.io/mvaneijgen/pen/ZEpqLWN I

You are missing the DrawSVG Plugin https://assets.codepen.io/16327/DrawSVGPlugin3.min.js You can type in the javascript codepen setting search box and search for "GSAP DrawSVG" and I also like to use the GSAP Installer to help me pick the right plugins for a particular project.

Hi @Jaydev12 I almost never use `.fromTo` because most of the animations already are at there end position, so I just want to start `.from` to where they already ar now, this makes your code a lot more readable. Also you can animate multiple items at the same time by creating an array `[item1, item2, ...ect]` from them if you do this the `stagger:` property works you can find more on this here . And if you are happy with your timeline I would sprinkle in some eases, you can find inspiration for that in the Ease Visualizer Here is a pen with some of my tweaks

@ZachSaucier that was more in line what I was looking for. But instead of getting the index from the for each I can just get it from the current stagger I see what you mean now, but setting a value to 0 (zero) means they kinda become optional gsap.from(".item", { opacity: 0, yPercent: i => i % 2 === 0 ? 0 : gsap.utils.random([100, -100]), xPercent: i => i % 2 === 0 ? gsap.utils.random([100, -100]) : 0, stagger: 0.3, }); https://codepen.io/mvaneijgen/pen/QWKjRPJ

@ZachSaucier thanks for the reply, is there a better way to get this to work? It seem overly complicated for just a simple effect. In CSS you have the property `translate` which takes two parameters for x and y, it seems that GSAP only has `translateX` and `translateY`, because if I just have translate I can feed it two values like so `100, 0` or `0, 100` to get the same effect https://codepen.io/mvaneijgen/pen/RwGWomx?editors=0010

How would you go about picking either X or Y in a stagger animation, but never both? Right now the animation will pick both a random direction for X and Y which result in the animation moving diagonally. gsap.from(".item", { opacity: 0, yPercent: "random([-100, 100])", // OR xPercent: "random([-100, 100])", // Never both stagger: { each: 0.2 } }); I was thinking something like this, but that is not valid and I don't know how else to write it. gsap.from(".itemFN", { opacity: 0, function () { const randomXY = gsap.utils.radnom(["yPercent", "xPercen

I've tried something and it works but I would suggest creating a timeline for each item and then animate everything only for that Item, otherwise you'll need to know how much letters are in each item before you can start the next animation. https://codepen.io/cjayanth95/pen/ZEOGMRL?editors=1010

I would suggest start building it and ask specific questions when you get stuck. (with a demo) It's much better to help you on the points that are to your skill level otherwise the answer on your question is "yes" it is possible to build with out the inertia plugin. I've tried removing the inertia plugin .js file from the project and everything still works (except the inertia of course).

Your frist problem is that you're returning the function it self not the time line function sw1() { var switchTl1 = gsap.timeline(); // return sw1; // ⛔️ name of the function return switchTl1 // ✅ name of the timeline } Over alI would create a master timeline (you already have that) and create functions of all your animations like you do with `sw1` and `sw2`, but do it also for the keyboard and the coding on the screen and add all those animations to the masterTime line. Right now there are all kinds of animations that are either playing or not, but are

I would fake it with chaining the background color of the loader to black at a certain point. It is also better to use the gsap 3 syntax instead of the old syntax Here is a small demo, try to tweak it yourself to help you understand it better https://codepen.io/mvaneijgen/pen/OJNxKNP

@emjay be sure to share your findings here, to help others in the future.