Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by azadsarxanli

  1. 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...

    See the Pen OJvyBeo by azadsarxanli (@azadsarxanli) on CodePen

  2. 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.



  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.

    See the Pen LYeQJog by azadsarxanli (@azadsarxanli) on CodePen

  4. 1 hour ago, GreenSock said:

    I'm not a React guy, but I think you forgot to add an empty Array to the useEffect(..., []) call so it's calling that on every render (re-creating your tween and ScrollTrigger many times?) 


    Also, there's a known regression in 3.9.1 that affects .from() calls with ScrollTriggers and it's already fixed in the upcoming release but you can work around it by setting lazy: false on the from() tween(s). 


    If you still need help, please provide a minimal demo. We don't want to see your whole project - just isolate things in the most basic, bare-bones CodePen or CodeSandbox possible with generic <div> elements (you don't need your official images or anything like that). 

    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 





    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() {
      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 className="content-aside">
            <div className="content">
              <h4>Трекер курьера </h4>
                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.
    export default Track;


  6. 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...

  7. 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... 

  8. 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.