sawacrow

Hi Rodrigo, Thank for your reply. Yes you right, i must add the image for clear. Like in the attached SVG. As you move the mouse, imagine the area near the mouse moving. It's very difficult to find an example, I couldn't find it again. I just found SS. I thought maybe there was a script that imported SVG and made such an animation. I mean, I hope.

Hello im looking for a script, Imagine a banner with SVG lines, and as you move the mouse, animations occur either in that area or everywhere. Is there a script for this, or does anyone know the concept? I've searched but couldn't find it.

I knew I had missed something. Thank you very much.

Hi all, I've done a similar build before and it worked. But it's not working now. There are max-height:400px and overflox-y in the "content-box" text area. I'm trying to log console.log as articles like "AWS, Azure, Google Cloud" are triggered. Trigger does not work when scrolling in max-height area. It wants me to scroll in the body. I want to run it in scroll in max-height field, where do you think the error is?

@Rodrigo, @geedix these are great answers. Thanks a lot ! I love this community more and more every day.

Hi, I'm trying to do something similar in concept to the video. 10-15 different SVG shapes will bounce low down the Header. But since I don't know the concept name of it, I can't do research and look at examples. I couldn't find any results in Codepen. (2d) it should be random/overlapping like tetris if possible. (i.e. it shouldn't go through) Does anyone know what the name of this concept is?

Hi. its about website actually. can be wrong category

Yeah thats it ! I was rediscovering America. Thank you @Rodrigo

Hey all, I am trying to scroll spy like in video. I tried many methods but couldn't solve some problems. Can you show the method please ? ( different colors and x coordinates were used as markers. ) https://codepen.io/sawacrow/pen/BaGjzYN

@Rodrigothank you !

Hey all, What is the name of this concept and i couldn't find gsap examples example 1: https://codepen.io/mbagolor/pen/oNLVxex example 2: https://codepen.io/PixelPink/pen/pEBMML I guess its "floating animation" but I cant find gsap examples.

hi @akapowl Learning never ends. It seems like a level advanced issue but it was solved with your support. Thank you hero. I will search for new subjects. https://codepen.io/sawacrow/pen/xxaNNBB

Hello, i want to do loop-vertical text slider. i did it but I have error on first screen. The numbers seem to be nested, and after the first boot, it gets better. //GSDevTools.create(); When I run the command, the problem is solved but I cannot detect the error. They should come with opacity:0 on first boot because CSS is defined. ( The problem is fixed in the 2nd round. ) ( by the way, I like the codepen script below, but it was written in gsap 2.0. I couldn't upgrade to 3.0 so I rewrote it. https://codepen.io/sawacrow/details/ZEMNZWY ) Question 2: when the animation on the first line is loop, so that it starts as the last animation starts, i.e. The "<" operator does not work because there is no element before it. how can i solve this? tl2.fromTo(".anim-text h1", {opacity: 0, y: -100}, {opacity: 1, y: 0, duration: 1, ease: ease}, "<"); tl2.fromTo(".anim-text h1", {opacity: 1}, {opacity: 1, duration: 1, ease: ease}); tl2.fromTo(".anim-text h1", {opacity: 1, y: 0}, {opacity: 0, y: 100, duration: 1, ease: ease}); tl2.fromTo(".anim-text h2", {opacity: 0, y: -100}, {opacity: 1, y: 0, duration: 1, ease: ease}, "<"); tl2.fromTo(".anim-text h2", {opacity: 1}, {opacity: 1, duration: 1, ease: ease}); tl2.fromTo(".anim-text h2", {opacity: 1, y: 0}, {opacity: 0, y: 100, duration: 1, ease: ease}); tl2.fromTo(".anim-text h3", {opacity: 0, y: -100}, {opacity: 1, y: 0, duration: 1, ease: ease}, "<"); tl2.fromTo(".anim-text h3", {opacity: 1}, {opacity: 1, duration: 1, ease: ease}); tl2.fromTo(".anim-text h3", {opacity: 1, y: 0}, {opacity: 0, y: 100, duration: 1, ease: ease});

Hi all, I wrote a library that makes the most used animations simple by integrating them with the scrolltrigger. You can visit the links below to review. Demo: https://cengizilhan.com/sawaMotion/index.html https://github.com/sawacrow/SawaMotion

no its not question. i just shared for showcase

Hey guys, I added a scroll trigger to this script and added a progress scenario. Original: https://codepen.io/j-v-w/pen/ZEbGzyv Rev- V2: https://codepen.io/sawacrow/pen/qBMxyWR

Sorry for the late reply. I didn't have time for this job. I will try to solve it with the methods you mentioned. Thank you so much

job completed. thanks

Hi all! I am using the script from codepen for snap-scroll. i like below web site scroll-zoom in-fade effect. is that possible on my scroll trigger? https://futuregreensteps.com/

yes its about safari's render system. thats solution awesome, problem is solved thank you so much !

Hello ! Below codepen is working well, (chrome and safari) https://codepen.io/DickeySingh/pen/LYGXrMq ( original ) But im trying like above code some different method. Im trying on "::before" class. Thats working well on chrome but on safari working weird as you can see. https://codepen.io/sawacrow/pen/abaqQeE ( Bugged, pseudocode class version) ( left side is chrome, right side is safari. you can see the distorted straight line lines.) I can solve that problem if do original method but maybe there is a solution to this problem... New bug detected: error still on "absolute" items...

Sure, https://althausyachts.com/ I will share the other project link after it is published. thank you. In such cases, I think it's enough to send you a message? maybe a general demand issue can be opened for this.

Hi, If you're not doing it for GSAP practice, there's no need to overengineer it. you can do it with just CSS. https://codepen.io/sawacrow/pen/ExeQyag

i see, If you link it to a domain that we can access, we can see it. you must verify your codepen accounts email btw. for view in full screen

As Rodrigo wrote, there must be a site link, codepen, video, etc., for us to see the problem. but if I'm guessing correctly, you want the selected element to be created/appeared in X orbit when scroll. You can add the code below. and add "animate-on-scroll" class to your element. but don't use "container" class. because container have 100vh it can cause trigger issues. if (document.getElementsByClassName('animate-on-scroll').length > 0) { gsap.utils.toArray(".animate-on-scroll").forEach(x => { var tler = gsap.from(x, { ease: "sine.inOut", y: 50, duration: 0.75, autoAlpha: 0, scrollTrigger: { trigger: x, start: "10px 80%", end: "+=100", //only to down toggleActions: "play none none reverse", end: "top 100%", } }); }) } I think this part of your code seems very problematic. it may not make sense to use such a high value: " end: "+=3500""