Janky animation, animation not smooth

[omeh]

please I need too know why my animation is not smooth

 

const boxType = document.querySelectorAll('.animated-element');
boxType.forEach((box, i) => {
    gsap.fromTo(
      box,
      {
        scrollTrigger: {
          trigger: box,
          start: 'bottom -100%',
          end: 'bottom 50%',
          scrub: true,
          markers: false,
        },
        y: -20,
        transformOrigin: 'top',
        ease: 'power4.out',
        opacity: 0.3,
        stagger: 0.1, // Adjusted stagger value
        duration: 0.5, // Adjusted duration
      },
      {
        scrollTrigger: {
          trigger: box,
          start: 'top 30%',
          end: 'bottom 50%',
          scrub: true,
          markers: false,
        },
        ease: 'power4.out',
        y: 0,
        transformOrigin: 'top',
        opacity: 1,
        stagger: 0.1, // Adjusted stagger value
      }
    );
  });
  

          <ul class="mt-4 flex flex-col">
            <li
              class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center "
            >
              <span
                class="inline-flex items-center gap-4"
              >
                <span class=""
                  ><svg
                    class="w-6"
                    viewBox="0 0 23 5"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M2 2.5H21"
                      stroke="black"
                      stroke-width="4"
                      stroke-linecap="round"
                    />
                  </svg>
                </span>
                
              </span><span class="text-md inline-flex ml-4"
                  >Engage your global audiences</span
                >
            </li>
           
            <li
              class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center "
            >
              <span
                class="inline-flex items-center gap-4"
              >
                <span class=""
                  ><svg
                    class="w-6"
                    viewBox="0 0 23 5"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M2 2.5H21"
                      stroke="black"
                      stroke-width="4"
                      stroke-linecap="round"
                    />
                  </svg>
                </span>
                
              </span><span class="text-md inline-flex ml-4"
                  >Establish your brand</span
                >
            </li>
           
            <li
              class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center "
            >
              <span
                class="inline-flex items-center gap-4"
              >
                <span class=""
                  ><svg
                    class="w-6"
                    viewBox="0 0 23 5"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M2 2.5H21"
                      stroke="black"
                      stroke-width="4"
                      stroke-linecap="round"
                    />
                  </svg>
                </span>
                
              </span><span class="text-md inline-flex ml-4"
                  >Achieve your corporate purpose goals</span
                >
            </li>
           
            <li
              class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center "
            >
              <span
                class="inline-flex items-center gap-4"
              >
                <span class=""
                  ><svg
                    class="w-6"
                    viewBox="0 0 23 5"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M2 2.5H21"
                      stroke="black"
                      stroke-width="4"
                      stroke-linecap="round"
                    />
                  </svg>
                </span>
                
              </span><span class="text-md inline-flex ml-4"
                  >Connect with your employees</span
                >
            </li>
           
            <li
              class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center "
            >
              <span
                class="inline-flex items-center gap-4"
              >
                <span class=""
                  ><svg
                    class="w-6"
                    viewBox="0 0 23 5"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M2 2.5H21"
                      stroke="black"
                      stroke-width="4"
                      stroke-linecap="round"
                    />
                  </svg>
                </span>
                
              </span><span class="text-md inline-flex ml-4"
                  >Inform and influence your stakeholders</span
                >
            </li>
           
          </ul>

 

See the Pen QWYYXYm by omeh (@omeh) on CodePen

[GreenSock]

I notice several problems: 

• You've got a ScrollTrigger on the "from" and the "to" vars objects. That's definitely a problem. Think of the "from" part as just defining where specific tweening values should begin. It's basically like calling a gsap.set() at the very beginning of the tween. So you should NEVER put a scrollTrigger in the "from" vars. 
• Never put an ease or duration or stagger in the "from" part of the tween either. It doesn't make any sense since that's just for setting the initial state. 
• You're looping through each and every box and then creating an individual tween for each one...so there's no point in putting a "stagger" in those tweens because there's only one target. It doesn't hurt anything...it's just pointless. 

Were you trying to do this?: 

See the Pen vYbboJZ?editors=0010 by GreenSock (@GreenSock) on CodePen

[omeh]

Thanks a lot. I am new here. newbie mistakes

 

[GreenSock]

No problem at all! It's great that you're taking the time to dive in and learn the tools. Trust me, plenty of people have probably made similar mistakes and your willingness to post here will probably help others who search in the future. 

 

Good luck with your learning adventure. In no time, you'll get the hang of it and feel like you've got animation superpowers. 💪

[omeh]

Please wanted to ask. I it possible to manipulate an SVG path in gsap. Like a single straight path to be animated as a wave by adjusting its points.

[GreenSock]

You can animate literally anything that JavaScript can touch using GSAP. But there's not a magic setting that'll just make a straight path animate like a wave - you'll need to wire that up with some custom logic. Well, it might be simple but I don't really understand the effect you're going for so it's hard for me to advise you. Do you have an example? 

 

You can definitely use MorphSVGPlugin to morph between different <path> data. That's a membership benefit for Club GSAP though. You can try it as much as you want on CodePen/Stackblitz/CodeSandbox. https://gsap.com/trial 

[omeh]

ok thanks a lot. You have really helped a lot