[Aligning Element to SVG Path with GSAP]

 

Hello GSAP community,

I'm new to GSAP and struggling with making an element follow an SVG path while scrolling. The element isn't properly aligned and the animation feels off during scrolling.

Any quick tips on getting it to align correctly with the path and ensuring smooth scrolling animation?

Your guidance is much appreciated!

 

See the Pen NWoxvEd by VAIBHAV-MARKANDEYA-SINGH (@VAIBHAV-MARKANDEYA-SINGH) on CodePen

[Continuous animations for an element after a ScrollTrigger timeline is completed]

@mvaneijgen

Thank you for your help, your approach indeed resolved my issue. However, I would like to acknowledge @Rodrigo's explanation of the Observer plugin. Although I've grasped the concept of how the Observer works, I couldn't quite figure out how to apply it to achieve my specific requirements. Consequently, I haven't made any tangible progress in that direction yet, and as of now, I don't have any practical results to share.

Your assistance was greatly appreciated.

[Continuous animations for an element after a ScrollTrigger timeline is completed]

@Rodrigo

Thank you for your response. I'm relatively new to GSAP, and I'm having some difficulty understanding how to apply the Intersection Observer plugin to achieve my desired functionality.

Could you please assist me in modifying my code to create a scenario where, once the reveal animation is complete, the `.center` element remains in place? After that, I'd like to implement a scroll-based animation on the `.center` element. Finally, when the animation inside the `.center` element is finished, I want the page to scroll down to the next section.

I appreciate your help in achieving this. Thank you!

[Continuous animations for an element after a ScrollTrigger timeline is completed]

Hey I am super new to GSAP.
How can I ensure that after my reveal animation is completed using GSAP and ScrollTrigger, the page doesn't scroll down right away but instead triggers a new animation on the revealed element (in this case its  .center), and only after this  animation is completed, it scrolls to the next section?

EDIT:-

I have tried adding another timeline in .center   element but now also as you can see once first end  reaches scroll-end  after the reveal animation i want my .center element wait for second end  to reach scroll-end again. Instead center starts scrolling just after reveal animation is completed(i.e first end reaches scroll-end )

See the Pen wvNMGxm by VAIBHAV-MARKANDEYA-SINGH (@VAIBHAV-MARKANDEYA-SINGH) on CodePen

[Markers Overlap and Targeted Element Markers Not Visible in React with ScrollTrigger Timeline]

Hello everyone,

I'm currently working on a React application and have been trying to create an animation where a specific section within one of my components gets pinned, and upon completion of its animation, it should scroll down to the next component. However, I've run into an issue when applying ScrollTrigger and creating a timeline for an element within my component.

The problem I'm experiencing is that the start and end markers of the viewport coincide, and the markers for my targeted element are nowhere to be seen. Additionally, the position of the screen marker has shifted, and a strange line appears, covering the entire width of my screen.

I'm including the relevant code snippet from my component for reference:

 

 

import React, { Fragment, useRef, useLayoutEffect } from "react";

import "./style/main.css";

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

function Main() {

  const app = useRef();

  useLayoutEffect(() => {

    let ctx = gsap.context(() => {

      var tl1 = gsap.timeline({

        scrollTrigger: {

          trigger: ".box2",

          start: "0% 50%",

          end: "50% 50%",

          scrub: "true",

          markers: "true",

        },

      });

    }, app);

 

    return () => ctx.revert();

  }, []);

  return (

    <>

      <div ref={app} className="App">

        <div className="box1">

          <div className="box">selector</div>

        </div>

        <div className="box2">

          <div className="boxx">selector</div>

        </div>

      </div>

    </>

  );

}

export default Main;

Css for this component is 

body {

  background-color: var(--dark);

  color: var(--light);

  font-family: "Signika Negative", sans-serif;

  margin: 0;

  padding: 0;

  height: 100vh;

}

 

.box {

  position: absolute;

  width: 100px;

  height: 100px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background-color: var(--green);

  font-weight: 600;

  color: var(--light);

  transition: cubic-bezier(0.165, 0.84, 0.44, 1);

}

 

.App {

  display: flex;

  align-items: center;

  flex-direction: column;

  justify-content: space-around;

  min-height: 100vh;

}

 

.box1{

  background-color: #ffffff;

  height: 100vh;

  width: 100%;

}

.box2{

  background-color: #5900ff;

  height: 100vh;

  width: 100%;

}