tobe21

Thank you for your answers, I will do in js the scroll work inverted and then make the page scroll from bottom to top, so i can use triggers (for more synchronized animation because the customer sometimes change the content). At least now i know is not a easy way to do it Thanks again for your time.

I forgot to say, in this website this tiles scroll from top to bottom, they are inverted, not like the regular scroll, inside of this tiles i need to execute other animations when they reach the vp, but i cant make the other animations work because the triggers dont work, they just dont follow the elements, its like the triggers are in a different position.

The project is in react at the moment, the reason to make this tiles independent is because they are coponent, Yes I saw that the animation container is made for horizontal scroll, but i try it for vatical and kind of work. So in your opinion is better to make a big scrubbed timeline than try to make independent tl animations?

Hi, Im doing an animation where i do a fake inverted scroll, so the element came from the top to the bottom instead. The issue start when i try to make animation inside of this containers, for some reason the trigger inside of the container doesnt work properly. Here is a codepen (is a fast code pen so i did some of the height fixed in the animation, in my project this is calculated from the element): The second trigger (the container one) is not in the correct position like is behind the actual position of the element. Thanks in advance :D.

Just is case somebody had the same question: After 8hs of learning webworkers, I can say yes, works, perfect, the main thread now is light really light and the animation performance is 100x times better, GSAP is insane because from the worker I import my functions and execute all the animations in different threads, all is working perfect but its not working on iphone, for some reason, but the iphones run the old version of my animation (pure gsap and svg) perfectly fine. Thanks, this forum is amazing

I can't use videos for background in this project, the animations runs perfect, but I have the main-thread overload making the other elements in the site a little laggy, My main concern was if gsap can work with this technology (offcanvas) because this open a big door, I will be able to move part of this heavy load to other threads, thank you for the reply i will start learning offcanvas.

Hi, Im having some issues to make my animation perform better. The history of this project: This animation start as a svg animation, the svg is really complex about 16500 dots on screen moving like a wave, the animation performance is really bad I search in the forum (gsap forum) and some people recommend to make the animation inside of a canvas and use threejs or other webgl api. Now the animations is done by threejs rendering all the dots (16500 mesh) in a variable size canvas, the performance is 10 times better but still really heavy for the main thread (loading time), reading in firefox documentation of js, I found webworkers and searching more a found Offcanvas (like regular canvas but using webworkers) so the main-thread doesn't perform the heavy math for the animation and everything works more smooth. My questions is this one: Before go deeper into this I really need to be sure this is possible, can I animate threejs mesh in a offcanvas with gsap? is this possible? because if is possible I can take out from the mainthread a lot of work and make the website more smooth. I know this question is not 100% gsap related but maybe someone with more experience and knowledge can give a small yes or no. thanks so much

Thanks so much, yes this help me a lot, because now I can follow this example. One final question: is possible to use scrub in this example? because all the animation will be attached to the scroll.

Hi, I'm traying to make time line, but I want this lines to move up and down like a wave, I'm using motion path to make a circle follow it and SVGmorph to make the lines have a wave effect, but the problem is the circle continue following the old path, instead of follow the actual path with the morph applied. I did a small code pen to show what I'm working on. Thanks - Beto