azadsarxanli

Thanks, master! ^^

I'm trying to create `pixel art`. I change `display` from `block` to `none`, because I don't need smooth transition. I used `stagger` to animate that, but when I do that, I observ, the first element's display doesn't change. But When I add, `opacity: 0` (*), it works as I want. * code, I talked about tl.from([svg1, svg2, svg3], { duration: 0.8, stagger: 0.4, display: "none", opacity: 0, repeat: -1, }); No idea, what's the problem, and why this occurs...

edit: Fixed! Thank you! It works very well! I've another question: as you see, if client scrolls too fast, then he can't see the animation as expected, cuz everything happens too fast. What is the solution for this problem? What should I read for this or.

I've done it with hard-code My another question is: what is the efficient way to do this? https://codepen.io/azadsarxanli/pen/VwyQEVL

Hi! Have a good day! I know, there is a timeline property. But I'm just confused. My animation must be such: the red circle's (".parent") rotation must be minus 90 degrees, and the first box's (".box1") className must be such: "box box1 active". I' ve done it with toggleClassproperty, but it removes the className after animation end. But my purpose is, when rotation -90 done, then first box's className must be so: "box box1 active". After another scroll, the red circle's rotation must be minus - 180 degrees, then first box's className must be so: "box box1" and the second box's className must be: "box box2 active". and when another scroll Happens the red circle's rotation must be minus 270 degrees, box2 className must be: "box box2", and so... But in my example, boxes dont follow the order.

Ah thanks to you! But I used "target", instead of "trigger". It seems I need to rest...

I used scrollTrigger for three sections, two of them worked totally normal, but when I add scrollTrigger for another section the start point goes different place (goes to almost top *). I can handle it just by changing the properties of start point, but I'm wondering why this happens. code of third section * photo https://imgur.com/a/VaunVoo unfortunately, I can't share all codes as public. I can send codes via DM import { useEffect, useRef } from "react"; import trackKuryer from "../assets/images/velokuryer-tracking-iphone.png"; import { gsap, Power3 } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; function Track() { gsap.registerPlugin(ScrollTrigger); const refTrack = useRef(null); useEffect(() => { gsap.from(".img-aside", { xPercent: -100, duration: 1, delay: 0.6, opacity: 0, scrollTrigger: { target: refTrack.current, markers: true, }, }); }); return ( <section className="tracker" ref={refTrack}> <aside className="img-aside"> <img src={trackKuryer} alt="track-kuryer" /> </aside> <aside className="content-aside"> <div className="content"> <h4>Трекер курьера </h4> <p> Nunc hendrerit cursus molestie interdum nulla nulla. Magna duis quis elit, rhoncus amet, eu duis condimentum purus. Eu sit dignissim ut ipsum vel scelerisque id ac. Turpis donec dolor vulputate et iaculis faucibus. Tempus urna enim maecenas feugiat amet, ultricies sit massa. Vestibulum erat. </p> </div> </aside> </section> ); } export default Track;

Sure! This code works fine. https://codesandbox.io/s/dreamy-lehmann-e8gupy?file=/src/App.js

simply, I want to do, when element triggered, GSAP must work. For example, if I click first element, gsap should aplly some properties (such as, backgroundColor, or width && height), then when second (or another one) triggered, first element's gsap (or which click happened first) must aplly the new one. So basically, I want to create basic toggle. I've solved it actually with CSS, but my professor wants it via GSAP. It's going frustrating...

Hi, OSUblake! I use className, cuz it must be dynamic. I mean, it comes from me server. In my real project actually, it comes as <element className="square randomColor" /> When I'm trying to do that, it only affects to last one. if you do not mind, please, check the link. https://codesandbox.io/s/still-cdn-wdv0s7?file=/src/App.js

Hi! I want to do very simple animation via GSAP. I've read userRef() article, for now it doesn't contain what I'm looking for. https://codesandbox.io/s/clever-kare-1678uo?file=/src/App.js:321-323 It works only once, then if you click again, `CONSOLE.LOG()` output is: GSAP target .false not found. despite, there is `.true` and `.false`. Any idea about solving that issue?

Yes, @akapowl, you're right. Thank you for your reply. My purpose wasn't, actually, asking somebody convert that for me. I just need example that shows it with an easy way. ^^ The post I mentioned is confusing a bit. Your js code is really hard to understand for me...

Hi! I have a vanilla js slider. I want to convert it to Gsap. I need to create slider never ends. like in that topic. Thanksss

ahaha thanks, superhero!!! you saved my day. < 3

Btw, why animation doesn't work when I delete scrubproperty