mvaneijgen

Can you share your approach in a code pen, so we can see what your thinking process is and better help you.

You want to disable scrolling? I would advice against that, scrolling is a core function of a website and if you take that away you must have a really good reason for it. If you really want to, you'll have to set something like CSS `overflow: hidden` on the element you want to stop scrolling and `onComplete: ...` of your animation remove that CSS. Again you must have a really good reason for disabling scrolling, because what if someone comes for the second time to your site and just want to get the content on the bottom of your page, they you'll we forcing the visitor to watch your animation every time?

You're overwriting animation with CSS. If you want to pin an element, just use `pin: true` don't also try to add `position: fixed`. I've giving your about section a height using the `100vh` instead of 100% https://codepen.io/mvaneijgen/pen/xxROmoN Hope it helps.

Is something like this what you are trying to do? https://codepen.io/mvaneijgen/pen/qBqNOGM I've created a function of your red panel animation and `.add(timelinePanel1())` that to the ScrollTrigger timeline, when this animation is done the rest of the time line will play with the blue panel moving to the left.

If i give your effect an empty array it works https://codepen.io/mvaneijgen/pen/yLVeEYW

I've done this in the past by just adding a `.add(() => {}, "+=1")` with an empty function. It's not that readable, but it works. https://codepen.io/mvaneijgen/pen/WNorJoX

@Viz checkout https://greensock.com/docs/v3/GSAP/Timeline at "Positioning animations in a timeline". Right now the animation of the removing starts `0.8` ms if you want to have this faster you have to decrease this number, try replacing the stagger variable with something like "0.4" I have also the feeling that you want to have the text at the same spot every time, if so try and position the elements with just CSS on top of each other (not in GSAP), then the animation can stay the same.

I've restructured your code a bit to help me understand it better. I always try to create as less ScrollTriggers as I need and combine things to a timeline if possible, so that is what I also have done here. The ScrollTrigger is on your `.mycontainer` and the items within animate. I've stolen the code from the following codepen (codepen.io/snorkltv/pen/301cb98dc1d0ce7ef0e90304f4de12be) (it from great GSAP course btw) The trick is too stagger in the elements on a certain timing and have them animate out on the exact same timing , right here it is `0.8`. Notice that the variable `stagger` is called three times in the timeline, two times for the stagger and the last one is to have the .to() start at `0.8` when it has finished the first stagger. https://codepen.io/mvaneijgen/pen/NWbGoxJ Hope it helps

@Andell good to know. I almost never use `gsap.utils.toArray`, I don't know why but `querySelectorAll` almost always works for me and you can also call the item directly within GSAP `gsap.to('.myclass')` which also gets all the elements with a class of `myclass`. But glad it helped you!

https://codepen.io/mvaneijgen/pen/vYyNNBw?editors=1010 You have to think about it like this, on which elements would you like to add a scroll trigger, for you this would be the wrapper, so it becomes `wrapper.forEach`. Than within the forEach you like to animate some stuff, in your case you want to animate multiple elements in a staggered fashion, so you give your animation ALL the elements (in your case boxes). As a side note I would scope your boxes to the wrapper, but it seems to work fine. https://codepen.io/mvaneijgen/pen/OJbyyVV?editors=1010

If you put a `forEach` around them you break them a part and then only have one item to stagger and because both boxes start at the same place they animate at the same time. You are telling that you have multiple [red][blue] boxes on a page? This doesn't show in your demo. But what I would do than is add a container around these boxes and add the trigger on the container [.container [red][blue] ] and then stagger the `.image__box-200` whiten your animation

ScrollTrigger is a different file you need to load. Take a look at https://greensock.com/docs/v3/Installation to help you install all the correct files for what you want to use

A demo would still be nice, because then we can see your thought process and help nudge you in the right direction. I would add a EventListener on mouse enter and then call your animation and reset it on mouse leave? Again a demo would be nice.

@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, but only when I had one number to animate, but I can't find how to do this with a stagger.

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 the past year of so. To name a few channels that helped me: Ihatetomatoes, snorklTV, DesignCourse and of course the Greensock channel its self https://www.youtube.com/user/GreenSockLearning

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 don't want to discourage you from using awesome tools like GSAP, but maybe you should first look in to some basic HTML and CSS before you dive in the deep and with animations.

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 https://codepen.io/mvaneijgen/pen/abmwBQd?editors=0010

@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", "xPercent"]); const randomMove = gsap.utils.radnom([-100, 100]); return `${randomXY}: ${randomMove}`; }, stagger: { each: 0.2 } });

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).