[gsap `stagger` work only for two elements]

Thanks, master! ^^

[gsap `stagger` work only for two elements]

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

[ScrollTrigger timeline does not work as expected]

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.

 

 

[ScrollTrigger timeline does not work as expected]

I've done it with hard-code  
My another question is: what is the efficient way to do this?

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

[ScrollTrigger timeline does not work as expected]

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

[ScrollTrigger start point doesn't match with trigger section]

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

[ScrollTrigger start point doesn't match with trigger section]

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;

 

[usage of useRef() hook via GSAP]

Sure! This code works fine. 

https://codesandbox.io/s/dreamy-lehmann-e8gupy?file=/src/App.js

[usage of useRef() hook via GSAP]

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

[usage of useRef() hook via GSAP]

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

 

[usage of useRef() hook via GSAP]

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? 

 

[endless gsap slider]

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

[endless gsap slider]

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

 

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

[ScrollTrigger repeating animation without scrub]

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

[ScrollTrigger repeating animation without scrub]

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

[ScrollTrigger repeating animation without scrub]

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. 

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

[ScrollTrigger version 3.9.0]

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.  

[ScrollTrigger version 3.9.0]

is anything changed on scrlollTrigger v3.9.0  ?

[GSAP 3 reverse() function]

I have simple animation. It works just once. Is there a simple way solve that problem?  Thanks!

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

[gsap works only once in click event]

Everything works fine, but only once. How to solve that? 

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

[integer counter with gsap 3]

It works now! Thank you! You saved my day! ^^ 

[integer counter with gsap 3]

thankssssssssssss! < 3

[integer counter with gsap 3]

Hi! I need to create a counter, but it must be integer. No need numbers after comma (dot). 

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

[How to pin section in scrollTrigger?]

Hi! I need some help. 

I want to do something like this: 

See the Pen oNjgEjm by GreenSock (@GreenSock) on CodePen

at that case, the section stops, animation ends and after that  scroll works normal. 

How to do it for "h2" tag in my code? 

 

 

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

[can ScrollTrigger do what ScrollMagic does?]

Hi! I'm new at ScrollTrigger (about 4 days). I have a simple question: is ScrollMagic and ScrollTrigger same?