Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
violet

Animate SVG line

Recommended Posts

Hello everyone, this is my first post so sorry if I'm wrong in something.
I'm unable to create a Codepen but I've created a Codesandbox, I hope it's good anyway.

What I want to do is very easy: animate an svg line tag. So I created a tweenMax.to animation but it seems not to work. Why?

 

export const AnimatedLine = ({ x1, y1, x2, y2, ...props }) => {
  const lineRef = useRef(null)

  useEffect(() => {
    if (lineRef.current) {
      TweenMax.to(lineRef.current, 1, {
        x1: x1,
        y1: y1,
        x2: x2,
        y2: y2
      })
    }
  }, [x1, y1, x2, y2])

  return <line ref={lineRef} x1={x1} y1={y1} x2={x2} y2={y2} {...props} />
}


When I run it, I get:
image.thumb.png.23c2d133f8f2b3ab80973ef7c6d074a1.png

Link to comment
Share on other sites

Hey violet and welcome to the GreenSock forums.

 

First off, you're using the old GSAP syntax. We highly recommend using the GSAP 3 syntax. I'm curious - where did you learn the GSAP formatting from? We continue to see people using the old syntax so if there are places that we can change to use the new syntax then we'd love to know.

 

Anyway, we recommend that you start with our getting started article. If you're just interested in the changes then the GSAP 3 migration guide would be a better place to learn. 

 

Onto your question: In general when animating attributes you should use the AttrPlugin. However, in this case you are keeping the variables in your state so instead of animating the attributes directly on your element (using .current) you should be animating the state variables. Now how you do that in React I'm not sure. I thought this approach might work but apparently I'm wrong :) Maybe @OSUblake or @Rodrigo will come by and help.

  • Like 1
Link to comment
Share on other sites

The error is because x1, x2, y1, and y2 are read only properties. 

They can only be set like line.x1.baseVal.value = someValue;

 

You should use attributes instead... and the newer syntax.

 

import React, { useRef, useEffect } from "react";
import { gsap } from "gsap";

export const AnimatedLine = ({ x1, y1, x2, y2, ...props }) => {
  const lineRef = useRef(null);

  useEffect(() => {
    if (lineRef.current) {
      gsap.to(lineRef.current, {
        attr: {
          x1, x2, y1, y2
        },
        duration: 1,
      });
    }
  }, [x1, y1, x2, y2]);

  return <line ref={lineRef} x1="0" y1="0" x2="0" y2="0" {...props} />;
};

 

 

 

  • Like 5
Link to comment
Share on other sites

3 hours ago, ZachSaucier said:

Hey violet and welcome to the GreenSock forums.

 

First off, you're using the old GSAP syntax. We highly recommend using the GSAP 3 syntax. I'm curious - where did you learn the GSAP formatting from? We continue to see people using the old syntax so if there are places that we can change to use the new syntax then we'd love to know.

 

Anyway, we recommend that you start with our getting started article. If you're just interested in the changes then the GSAP 3 migration guide would be a better place to learn. 

 

Onto your question: In general when animating attributes you should use the AttrPlugin. However, in this case you are keeping the variables in your state so instead of animating the attributes directly on your element (using .current) you should be animating the state variables. Now how you do that in React I'm not sure. I thought this approach might work but apparently I'm wrong :) Maybe @OSUblake or @Rodrigo will come by and help.

Thank you Zach! I probably found the link to the old doc from an article and didn't notice I was reading the old version API. I'll be more careful next time

Link to comment
Share on other sites

2 hours ago, OSUblake said:

The error is because x1, x2, y1, and y2 are read only properties. 

They can only be set like line.x1.baseVal.value = someValue;

 

You should use attributes instead... and the newer syntax.

 


import React, { useRef, useEffect } from "react";
import { gsap } from "gsap";

export const AnimatedLine = ({ x1, y1, x2, y2, ...props }) => {
  const lineRef = useRef(null);

  useEffect(() => {
    if (lineRef.current) {
      gsap.to(lineRef.current, {
        attr: {
          x1, x2, y1, y2
        },
        duration: 1,
      });
    }
  }, [x1, y1, x2, y2]);

  return <line ref={lineRef} x1="0" y1="0" x2="0" y2="0" {...props} />;
};

 

 

 

Thank you OSUblake, very helpful. So the coordinates x1="0" y1="0" x2="0" y2="0" are where the first animation (at page refresh) starts? Right? Sorry, I'm a beginner..

Link to comment
Share on other sites

5 hours ago, violet said:

Thank you OSUblake, very helpful. So the coordinates x1="0" y1="0" x2="0" y2="0" are where the first animation (at page refresh) starts? Right? Sorry, I'm a beginner..

 

Yeah, that attr plugin won't work unless there are some initial values.

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×