Androlax

Thank you a lot for your answers @Windpixel & @GreenSock. I didn't knew about a lot of methods you just used, I'll keep that in mind for later. @GreenSock What would be the main benefits of going for the complex scenario you mentioned ? What is the benefits over the solution you just made ?

Thank you for your answer, I kinda thought of using timeline, but the problem is, I still want the line to be used as a scroll trigger as you can see in my example. To have that effect of "reading" the text while scrolling down. If It's too hard / impossible to do what I want, the solution I've is to have an animation to "read" all the lines that are visible on screen and lock the scroll till the animation is completed. The main thing needed in my case was to be able to kinda "separate" the logic in two blocks : - What is visible, - What is not, The - What is not part is the easiest one, and already made. The - What is visible part is the hardest one, the ideal scenario would be to : - Start scrolling, - "Pin" the first visible lines and make it "read" the lines - When all those lines has been "read", continue with the normal flow I tried a lot with pin and stuff like that, but I was continuously into the problem of : I still need the lines to be triggered by the scroll, so you could scroll in the pinned element, but it should take into account the amount you scroll and calculate which line you should be read

Hello, I've made a basic animation which reveal text when scrolling. My issue is, when you are just coming to the page, the text is already revealed, but I would like to be able to scroll through the first paragraphs, and then continue on the others one. Here is the codepen as the example : https://codepen.io/androlax2/pen/KKEzdoa Basically, the main issue is, when arriving to the page, as the scroll trigger is triggered by the top of the .line and when the bottom of the viewport reach that top of the .line, it starts the animation. The problem is, when coming first to the page, it should be triggered by the top of the viewport to the top of the first .line classe and then, when animation of reveal are ended on those .line, it should scroll down to the others .line which are working fine. I tried a lot of stuffs, pinning the first paragraphs visible in the paragraph in a div, etc... But it don't works as expected 😕

By the way, if you want something from me (money or anything else) to thank you for your time it would be my pleasure @akapowl

Great, thank you very much, I will look at this in my project and see what it looks like, however, I can put the section in 100vh to make it easier. Thank you again for the help, unfortunately I still know very little about GSAP so I'm quickly limited as I don't have the full spectrum of how it can work, the limitations etc... If ever I can't get what I want, or at least a working version, I'll go to the freelance side (GSAP & Freelance), I've noted everything that has been said. Thanks again!

Hey @akapowl, Of course I understand. I tried my best to find a solution with this parallax section, I feel like it will be kinda complicated I tried to remove the 'overlay reveal effect' effect, to do this horizontal scrolling thing but It bug for some reason. It is obviously possible for me to pay someone (how much?) to help me with this problem. You have already helped me a lot, if you are interested, it would be nice to be able to return the favor

Hey, got another little problem. You will find it on the codepen, I want to have a horizontal scrolling section (you will find it in pink in the codepen), but when the scroll is on the pink section, the little red boxes start to translate to fake the horizontal scrolling but the pinned pink section does not stop. If I pin the horizontal scrolling to the pin of the section it does strange thing. Is there a thing to make both works ? So when the scroll is on the pink section, it scroll horizontally and then the pink section will stay there and wait for the user to scroll completely horizontally. Thanks you again GSAP for your help ❤️

Alright you are a genius ! (That was the easiest thing and did not even think about it aha)! Thanks you a lot again !

Thanks you a lot @akapowl, For the `start: bottom bottom`, It will break only if the section is not `100vh`. I updated your pen there : https://codepen.io/th-o-benoit/pen/PoJBewR You can take a look at the green section, when we scroll to it, it works well, but when the section is ended, the text inside the section is translating too. Is there a way to resolve that ? Again, thanks you for your time ❤️

Yeah of course you can't see it without a little demo aha, I made up a little minimal demo : https://codepen.io/th-o-benoit/pen/ExwpQee As you can see I changed the `start: top top` to `start: bottom bottom` => It breaks if there is a little section (look at the green section), it moves the text inside And another one, I have a section on top with an image on right, and texts on left, I want the image to be pinned till the text is scrolled down entirely (It make it break so) Do you see the problem ? (there are both problem I guess, because the second one is not working even with the `start: top top` Edit: Maybe it has something to do with the `pinnedContainer` option?

Alright, it works pretty well, thanks you. Got a problem on a real world example, if the section have some more content, It will not work properly, I presume I will have to adapt the `end` option ?

Hello @akapowl I updated the codepen : https://codepen.io/th-o-benoit/pen/QWqBame I misunderstand how this can working there ? I think I don't quite understand how everything works here

Hey, I have a problematic with LocomotiveScroll & GSAP, I would like each section to show on top of each other while scrolling basically like this https://codepen.io/JackiePaper/pen/mdPvGPK?editors=1010 It's working well with the ScrollTrigger.create(xxx) if I remove `data-scroll-section` on each section with LocomotiveScroll (because this one manage the transform of the section). A website have done it pretty well there : https://clar.dev/ I tried to reverse engineer this, but could not find for now how they did this. If you have any idea on this problematic

You are right, thanks you a lot ❤️

Hey GSAP ! I have a little question. On the codepen the scrollTrigger is not triggered properly after the section scrolling horizontally. I feel like it's triggering while scrolling to bottom when we are in the horizontal section because scrollTrigger is "thinking" we are at the start point to trigger the animation of the next animation "My super title". I imagine I have do calculate more precisely with something like : `start: 'xxx xxx+={OUR CALCULATION HERE}` But I don't know what the `{OUR CALCULATION HERE}` or if there is any other way to do that. Thanks for your help.

Hey, I did a little animations for a website. As you can see in the codepen https://codepen.io/th-o-benoit/pen/vYeJrNa The animation on the building works pretty well I guess (If you have any idea on how to do it better, don't hesitate) My only problem is the text on the side. It is a long text anyway, If I pin it, it will not be really good I guess (Is there a way to make it looking good ? So the user have the animation on the right side and on the left side the text will scroll with the animation and he can have all the text too). If this is not possible I have an idea like : - Scrolling to the text, when the text end is near, the building start transitioning to the center so we only see the building when the text is finished Or, if you have any other idea, don't hesitate Thanks you a lot

Yeah, I wasn't talking about the animations, I was talking about how I made it (in the super large object), what would have been your approach ? For me, it was the most modular thing (a bit like OOP in php (I go more backend than frontend)). Then maybe it's stupid, I don't know. How would you have done that?

Hello, Thanks again for your reply. The large amount of gradients that you're using make performance a bit hard. It might be good to use less gradients or convert the ones that you can to images/canvas to avoid the performance hit. ---> What do you mean ? How I can do achieve that ? Overall your structure is a bit different than how I would structure it (I've never seen a a huge object and all of this nesting that's not trying to be a generic class or something) but it's not bad. ---> I chose to do this because the animations I do are not really usable for other things than maybe the leaves? (animateLeafs), how would you have proceeded, for example?

Hello, I don't know if this is common here to do that, I would like (if you have time, and if it's possible for you), to have a first experience return, it's the first time I do something with GSAP and I would like to know if I did it well ? If I couldn't do better ? Here is what I made : https://codepen.io/th-o-benoit/pen/oNNKpmB I guess it's pretty simple for someone who is really good with GSAP, but I'm proud of what I made for now aha, I feel like it's cool :D:D Thanks for the help some gave me

Hey again, I did that so : https://codepen.io/th-o-benoit/pen/wvvVvBK I feel like it's not that bad. I really don't understand what I did in the stagger thing, I understand a bit the modifiers, but stagger is really strange for me. If someone have any idea how to improve this, I would be happy to hear it ^^ Thanks a lot @mikel

Hey @mikel, Thanks you, I understand for the scale so. Do you have any idea for the "x" moving randomly ? And do you have any idea on the fact that I would like bubbles to be closer (randomly too), and that could be infinite ? Like, when I try to make bubbles closer like : stagger: { each: (object.duration * 0.7) / $(object.el).length, repeat: -1 } It don't work, I mean, when every bubbles have finished, they don't restart automatically

Hello again, I have a new problem, for fun I try to do something interesting, but I really can't find a way how to dit again (cf the topic on bubbles animation I made :() Look at the screen, I would like to have some bubbles I mean, having different width, different X moving, and maybe different delay between each, to make it smooth and feel like there is really some random bubbles coming from this little pipe. For now I have something like that : let object = this.animations.laboratory.bubbles, $bubble = $(object.el).eq(0); for (let newBubble = 0 ; newBubble < object.maximum ; newBubble++) $bubble.clone().insertAfter($bubble); gsap.fromTo(object.el, object.duration, { opacity: 1, y: 0, scale: Math.random(), transformOrigin: 'center' }, { opacity: 0, scale: 0, x: Math.PI * 4, modifiers: { x: x => Math.sin(parseFloat(x)) * 5 + 'px' }, y: '-=100', stagger: { each: object.duration / object.maximum, repeat: -1 } }); It seems like the other topic, but I tryed to do something with timeline maybe ? To add each bubble with random values but I cant find how etc.. I can't find a way to make them coming closer than the other bubble "randomly" and feel like it's "natural". I really googled everywhere since this morning but I can't find a lot of "tuto" on how to GSAP. So I have to practice a lot, and I'm kinda a newbie on GSAP, so sorry ^^ But thanks for your help If you find a way

Hey @ZachSaucier Thanks you alot, didn't even saw the new version aha ! I think I understood, timeline wasn't the good idea, went the wrong way!

Hello, I am on this problem since 2 hours, it is something pretty simple I guess, but I can't find a way to do it properly lol (newbie in TweenMax) If you could help me that could be nice ^^ Here is the codepen : https://codepen.io/th-o-benoit/pen/JjjQLPa I would like the bubbles to feel infinite, I mean, when the timeline is over, there is a delay since a new bubble come, and I really don't see how to make it smooth :s Thanks for your help

Thanks you @PointC, I understand well now (not really a good way to do it with ScrollMagic sadly aha)