Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

azadsarxanli's Achievements

  1. 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.
  2. 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
  3. 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.
  4. Ah thanks to you! But I used "target", instead of "trigger". It seems I need to rest...
  5. 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;
  6. Sure! This code works fine. https://codesandbox.io/s/dreamy-lehmann-e8gupy?file=/src/App.js
  7. 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...
  8. 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
  9. 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?
  10. 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...
  11. 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
  12. ahaha thanks, superhero!!! you saved my day. < 3
  13. Btw, why animation doesn't work when I delete scrubproperty
  14. Hi, dears! I've a complicated project. I've done it almost, but there is a little thing. It's realllly annoying. Simply put, I need something like this, but no need scrub.
  15. Because I got some errors. When I use gsap 3.9.0 I get integrity error, but when I change it to 3.8 errors disappear. Btw, I took scripts from greensock's download section. Also, there is another way to fix that error: I've just deleted the integrity and other attributes except src.