momo12

Hi, I need a help. I have two elements with the same class-name which appears on scroll. I use scrolltrigger.batch but is there a way to use the normal scroll trigger and gsap.to / and inside gsap.to we set the stagger? ** The problem I have here is if we don't scroll all the way down to the bottom of our trigger (when it ends), the animation does make problems when we enterBack! The enter back won't work unless we scroll down first time and reach the end point. ** Another issue why the animation will be triggered without considering the scroll percentage? I mean I want to scale up the boxes according to the scroll position, not trigger the animation at once. In other words, the animation will run but I want it does a normal job if we scroll 50%, the boxes scale up 0.5 and if we scroll 100%, they reach 100% of their desired scale.

Thanks man. You are a GSAP super hero.

Hi guys, I have a problem. The stagger of mouseout works but the mouseover stagger is not working!

Yes. I added two script tags of GSAP and it seems caused an issue. Thanks!

Sorry guys, I have a few gsap.timelines(); I want to animate something when user clicks on a button for the first time (It will use A as GSAP.timeline()) and if user clicks on a button for the second time (It will use B as GSAP.timeline()). The problem I have is what should I do if user clicks continously? Third and fourth and ...! I use this code but doesn't work for some reasons! var clicks = 0; $(".m-btn").click(function() { if (clicks % 2 == 0) { tl.play("spin"); } else { tl.play("spinn"); } clicks++; }); Found the problem! Added GSAP a few times caused the issue

The reason it doesn't work was the "Wrong initial position" of the mask div. I came up with a custom solution. changing a few pixels(100px) the current position of the cursor and assign it to the X and Y values of the mask.

@geedix It stays behind the cursor.

Sorry guys, I finally found a way to reveal a div with a custom cursor. The thing is the mask is not moving enough. If you move your cursor you can see the circle stays away from the current position of the cursor. Is there a solution to fix this? Thanks a lot!

Thanks for sending this over. I'm not sure how this even works Could you please make an easier example like my codepen? So, I can learn that? I'm not good at coding and just learning.

Hello guys, I was thinking to have a custom mouse but it does something more: It reveals the content of another div block beneath the main div. As you can see, the image is moving with the mask. But I just want the mask moves, not the image! Best example: https://www.castoretpollux.com/agence

Use Locomotive Scroll for having a smooth scroll (If you're not a premium user). Honestly, this kind of animation works better when the scroll is smooth You can set the initial state of the texts in css. Change them by using a Gsap.to(). Put each text inside a div. So, you can animate the text colors by detecting the wrapper of each text. Thanks to GSAP you don't need to be a powerful developer! It's amazing

@Rodrigo Sorry I have a simple question. The hovering doesn't last and sometimes the circle becomes small like there is no hover.

You're an angel! Thanks man!

Hello guys, I'm not good at coding but I came up with this code but for some reasons the code is not working when hovering over objects or leaving them. Do you know why it's not working? Sorry for my childish question!

Thank a lot for your explaination!

Hello guys, I have a question. Let's say we have a pragraph. How can I reveal each line using Stagger (I want to add delay to the bottom lines) and SplitText? The thing is I want the div block which contains each line, masks the initial state. So, the lines wouldn't be visible by default.

Thanks a lot for your help! Your answer helped me to understand what I was doing wrong.

It still doesn't work. The all cursors are the same. do you think I'm doing something wrong? I'm looking to create a tail for the cursor and as you know, the tip is always smaller.

Hello guys, I'm exploring more GSAP. I have a question. How can I tell GSAP to change the scale of the ".cursor" class using Stagger when they move? I want the "Cursor" classes which follow the main cursor div be smalle from a scale like 1 to 0.5 using Stagger.

Thanks a lot! I just started learning this amazing library!

Hello guys, I have 3 questions. 1- How can I tell ScrollTrigger to end the scroll animation when 60% of the div height has been scrolled up? 2- How can I tell ScrollTrigger to end the scroll animation when (70%+5em) of the div height has been scrolled up? 3- Also, another question: I saw this format somewhere: end: ="+500" what does this mean? this is the one I have used but didn't work. ScrollTrigger.create({ trigger: ".s2-wr.projects", scroller: ".sections-wr", start: "40em 0%", end: 'center+=100px center', markers: true, scrub: 0.2, onEnter: () => gsap.to('.s2-wr.projects', { backgroundColor: "#ffffff", duration: 0.2, }), onLeave: () => gsap.to('.s2-wr.projects', { backgroundColor: "#000000", duration: 0.2, }), onLeaveBack: () => gsap.to('.s2-wr.projects', { backgroundColor: "#000000", duration: 0.2, }), onEnterBack: () => gsap.to('.s2-wr.projects', { backgroundColor: "#ffffff", duration: 0.2, }), });