CODEWITHSUNDEEP
javascriptgsap
Prateek
Prateek

Reputation: 854

gsap mouse trailing on v3

I'm trying to get the effect shown in this pen using gsap v3, but can't get it to work. The provided pen is in older version of gsap, I tried converting it as shown below:

            const createLine = (leader, i) => {
            let line = document.createElementNS(svgns, 'line');
            line.setAttribute('data-svg-origin', '0 0');
            rootSvg.appendChild(line);

            gsap.set(line, { x: -15, y: -15, alpha: (5 - i) / 5 });

            let posX = gsap.getProperty(line, 'x');
            let posY = gsap.getProperty(line, 'y');

            gsap.to(line, 1000, {
                x: '+=1',
                y: '+=1',
                repeat: -1,
                modifiers: {
                    x: () => {
                        let x = posX + (leader.x - posX) * ease;
                        line.setAttribute('x2', leader.x - x);
                        return x;
                    },
                    y: () => {
                        let y = posY + (leader.y - posY) * ease;
                        line.setAttribute('y2', leader.y - y);
                        return y;
                    }
                }
            });

            return { x: posX, y: posY };
        };

But this produces very buggy output. How can I make this work using gsap v3.

Upvotes: 0

Views: 182

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25984

You're using static values inside of the modifier functions whereas the original is pulling values every update from the objects. Use gsap.getProperty() inside of the modifiers functions for both the line and the leader and it will behave like you want it to: Demo

Upvotes: 1

Related Questions