Jump to content
Search Community

NLopesx

Members

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by NLopesx

    Low FPS when the first animation plays.

    in GSAP

    Posted

    16 hours ago, Makssshow said:

    Hello! It is hard to help you without your code. Can you add a codeopen link or just paste the code into your message?

    The JS is basically this. I think the HTML and CSS doesn't matter maybe.

     

    gsap.registerPlugin(ScrollTrigger);
     
    ScrollTrigger.matchMedia({
     
      "all": function () {
     
        // OPACITY 1 THE OBJECT .opacity ON SCROLL
        const opacity = gsap.utils.toArray('.opacity');
     
        opacity.forEach(opacity => {
          gsap.to(opacity, {
            scrollTrigger: {
              start: "0% 90%",
              end: "0% 60%",
              trigger: opacity,
              scrub: true,
              // markers: true,
            },
            opacity: 1
          })
        });


     
        // HOME TEXT SLIDING LEFT 
        gsap.to(".scrollLeft", {
          scrollTrigger: {
            trigger: ".scrollLeft",
            scrub: 1,
            start: "50% 90%",
            end: "0% 10%",
            pin: true,
            // markers: true,
          },
          xPercent: -43
        })


     
        // GLOBAL TITLE SLIDING LEFT
        const titleLeft = gsap.utils.toArray('.titleLeft');
     
        titleLeft.forEach(titleLeft => {
          gsap.to(titleLeft, {
            scrollTrigger: {
              start: "0% 90%",
              end: "0% 10%",
              trigger: titleLeft,
              scrub: 2,
            },
            xPercent: -6
          })
        });
     
        const titleLeft2 = gsap.utils.toArray('.titleLeft2');
     
        titleLeft2.forEach(titleLeft2 => {
          gsap.to(titleLeft2, {
            scrollTrigger: {
              start: "0% 90%",
              end: "0% 10%",
              trigger: titleLeft2,
              scrub: 2,
              // markers: true,
            },
            xPercent: -15
          })
        });
     
      },
     
      "(min-width: 799px)": function () {
     
        // PHOTOS SLIDING
        gsap.to(".Dev", {
          scrollTrigger: {
            trigger: ".Dev",
            scrub: 1,
            start: "50% 70%",
            end: "50% 20%",
            // markers: true,
          },
          xPercent: -30
        })
     
        gsap.from(".Mkt", {
          scrollTrigger: {
            trigger: '.Mkt',
            scrub: 1,
            start: "50% 70%",
            end: "50% 20%",
            // markers: true,
          },
          xPercent: -30
        })
     
      },


     
      "(max-width: 799px)": function () {
     
        // HOME TEXT SLIDING LEFT 
        gsap.to(".scrollLeft", {
          scrollTrigger: {
            trigger: ".scrollLeft",
            scrub: 1,
            start: "50% 90%",
            end: "100% 0",
            pin: true,
            markers: true,
          },
          x: -1300
        })
     
        // PHOTOS SLIDING
        gsap.to(".Dev", {
          scrollTrigger: {
            trigger: ".Dev",
            scrub: 1,
            start: "50% 70%",
            end: "50% 20%",
            // markers: true,
          },
          xPercent: -76
        })
     
        gsap.from(".Mkt", {
          scrollTrigger: {
            trigger: '.Mkt',
            scrub: 1,
            start: "50% 70%",
            end: "50% 20%",
            // markers: true,
          },
          xPercent: -76
        })
     }
     
    });

    Play animation according to the scroll - TimelineMax

    in GSAP

    Posted

    13 minutes ago, Cassie said:

    I don't see any mention of scrolltrigger in that code you pasted in.

    We can usually help more effectively if you provide a minimal demo though, codepen is great for this.

    If you haven't used codepen before, here's a post explaining how.

    See the Pen PopZJwp by NLopesx (@NLopesx) on CodePen

     

    This is my example.

     

    I need a function(I don't know if it works with a function) that plays the timeline2 at the X scroll position like the first code pen example.

    Play animation according to the scroll - TimelineMax

    in GSAP

    Posted

    33 minutes ago, Cassie said:

    Hi there!

    You're probably looking for scrollTrigger - 

     

    This is the timeline I created:

     

    let timeline2 = new TimelineMax ();

     

            timeline2

     

            .from ('.grid', 1 , {

                opacity: 0,

            })

     

    And this is what I need (

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

    ), but it's not working don't know why.

    Maybe deprecated or I'm just being a noobie?

    Plays the animation once I scroll

    in GSAP

    Posted

    14 minutes ago, Cassie said:

    There's a lot going on in this example. Still not really sure what you mean. Sorry.

    The animation takes 1 second and only after 1 second I can scroll again.

     

    The scroll gets "disabled" while the animation is going on, don't know how to call it.

     

    If can't help me, thank you a lot. :)

×
×
  • Create New...