Jump to content
GreenSock

azadsarxanli

Members

  • Posts

    27

  • Joined

  • Last visited

 Content Type 

Posts posted by azadsarxanli

    gsap `stagger` work only for two elements

    in GSAP

    Posted

    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

    in GSAP

    Posted · Edited by azadsarxanli
    fixed

    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

    in GSAP

    Posted

    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

    in GSAP

    Posted

    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

    in GSAP

    Posted

    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

    in GSAP

    Posted

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

    endless gsap slider

    in GSAP

    Posted

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

    ScrollTrigger version 3.9.0

    in GSAP

    Posted

    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.  

×
Login Create Account