Jump to content
Search Community

SVG animations using GSAP & React in 2018

Higeath test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have lately done a bit of research and I could not find any 'best' practices or anything of the sorts regarding GSAP and React, especially when it comes to SVG javascript animations.

 

A simple example, I've added to codepen, I'm trying onClick of the line change its x1 value, but it is not being changed because React properties being read-only and I was wondering what to do in this situation?

 

If anyone could point me to sources explaining this or just going more in-depth regarding GSAP + React combo I would really appreciate it.

See the Pen RBwYVG by Higeath (@Higeath) on CodePen

Link to comment
Share on other sites

x1 is a property of a line, but it's value is set on a different path/object.

 

this.line.x1.baseVal.value = 150;

 

Definitely not a convenient value to animate. Try using the AttrPlugin.

https://greensock.com/docs/Plugins/AttrPlugin

 

TweenMax.to(this.line, 1, {
  attr: {
    x1: 150
  },
  stroke: "red"
})

 

Updating to the latest version of GSAP wouldn't hurt either.

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js

 

 

  • Like 4
Link to comment
Share on other sites

Wow, I have no idea how come I couldn't get to that solution doing my research.
Thanks,

If you don't mind would you say this is a good way to animate 'drawing' like animation? by slowly extending x/y value? 

Link to comment
Share on other sites

I guess it depends on what your drawing, but most people animate the stroke-dashoffset and stroke-dasharray, like the DrawSVGPlugin does. 

https://greensock.com/docs/Plugins/DrawSVGPlugin

 

Not saying that is the best technique, but it's certainly easy. For lines/polygons, I like animating SVGPoints directly.

 

 

 

That can be used to create some pretty interesting stuff, like waves.

 

See the Pen QKYGyo by osublake (@osublake) on CodePen

 

 

 

  • Like 4
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.
×
×
  • Create New...