sawacrow
Members-
Posts
32 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by 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});
-
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
-
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
-
Whenever I do a scroll, it shows me a white screen for no reason.
sawacrow replied to Sadness7311's topic in GSAP
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 -
Whenever I do a scroll, it shows me a white screen for no reason.
sawacrow replied to Sadness7311's topic in GSAP
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""