Jump to content
Search Community

Animate SVG path attributes

Sébastien Gilbert test
Moderator Tag

Recommended Posts

2 hours ago, Sébastien Gilbert said:

how to animate SVG Path attributes with GSAP 3

 

Hi @Sébastien Gilbert and welcome to the GreenSock Forums.

 

You can tween the same number of values (this is important) via "attr:{}".

The following link is an older example of this, but still applies to GSAP 3.

See the Pen NbQYzP by asistapl (@asistapl) on CodePen

 

You can also if you prefer use the morpSVG plugin (member benefit) for when you require a differing number of values in your SVG shapes.  Here is a thread with an example of that approach.

 

https://greensock.com/forums/topic/21464-multiple-morph-svg/

 

Do those help you?

 

  • Like 9
Link to comment
Share on other sites

  • 5 months later...
23 hours ago, ZachSaucier said:

@kisha To animate between path values with a different amount of points you need to use the MorphSVGPlugin :) 

 

 

Ty Zach...I was able to get same number of points to get given result..I will upload demo later...GSAP subscribtion looks pretty cool but not really in position to buy it right now. 

It really werid when I was making vectors in illustrator (I tried xd and figma too). Output would always have different numbers of points, and I tried a lot of tweaks before it would print same amount of points

Link to comment
Share on other sites

I wrote a whole post about Illustrator's "helpfulness" when trying to morph from straight edges to an organic shape.

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

I use a melting animation as an example, but it applies to many organic shapes and animations.

See the Pen bc745a7afdb02d98ce948d56315e615b by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

 

 

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

6 minutes ago, PointC said:

I wrote a whole post about Illustrator's "helpfulness" when trying to morph from straight edges to an organic shape.

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

I use a melting animation as an example, but it applies to many organic shapes and animations.

 

 

 

Happy tweening.

:)

 

 

 

 

 

Thank you! This is useful 

Link to comment
Share on other sites

  • 6 months later...
On 8/27/2020 at 7:41 PM, PointC said:

I wrote a whole post about Illustrator's "helpfulness" when trying to morph from straight edges to an organic shape.

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

I use a melting animation as an example, but it applies to many organic shapes and animations.

 

 

 

Happy tweening.

:)

 

 

 

 

 

Hi @PointC, It's been a few months, but I finally got time to go back to this project. 

I was able to do get all the points by following your guide from motiontricks, here is the codepen:

See the Pen qBqoKNQ?editors=1010 by kohlej (@kohlej) on CodePen



But I was not able to do the same when I would curve the middle point...The result is...well here is the link:

See the Pen BaQrxOX?editors=1010 by kohlej (@kohlej) on CodePen



I tried all kind of tweaking the svg code with no luck...Is there anything you could tell by looking at these codepens that Im doing wrong? 

Link to comment
Share on other sites

18 hours ago, PointC said:

oh my mistake. I see what the 3rd path is for now. You are trying to curve and then go flat at the top. Like this?

 

 

 

 

Hi again! Yes, the latter codepen is exactly what I needed. 

I just noticed that I had similar result using different technique than you used here (however this is imperfect solution, as the flat/ending shape is never really flat, there is 2px on left top and right top point, and also starting point is not perfect rectangle, if i made them perfect it wouldn't work), also if I use your paths from your codepen, and add them to my example, it becomes mess again for whatever reason:

See the Pen RwoyRgo by kohlej (@kohlej) on CodePen



Anyway, your solution solved my problem of making it perfect, I copied the SVG in illustrator and I think I got better understanding of how you done it. Thank you so much.

  • Like 2
Link to comment
Share on other sites

  • 5 months later...
  • 1 year later...

@Shrug ¯\_(ツ)_/¯ care to explain how can I do that in the figma when editing the path? It is annoying because I tried to make a three parts of the animation of it for svg. Let say... we have initial of shape rectangle like 1000x20 -> then curved based on your demo -> 1000x1000 something like that. I hope you get what I mean. 

Here is the code sample in reactjs. And I couldn't get it when I tried to make my own animation in svg path. 

 

import { useEffect } from 'react';
import './App.css';
import { gsap } from 'gsap';

function App() {

  useEffect(() => {
    let $path = document.querySelector(".path"),
        $logo = document.querySelector(".logo"),
        repeat = false,
        tl = gsap.timeline(repeat ? { paused: true } : {repeat: 1, repeatDelay: 1}),
        animate = () => {
          const start = "M0 1.48294C0 1.48294 291.279 4.77898 502.888 1.48666C717.742 -1.85616 1000 1.48294 1000 1.48294V1000H500H0L0 1.48294Z" 
          // "M 0 100 V 50 Q 50 0 100 50 V 100 z";

          const end = "M0 410.5C0 410.5 291.279 3.75291 502.888 0.460595C717.742 -2.88222 1000 410.5 1000 410.5V998.974H500H0L0 410.5Z" 
          // "M 0 100 V 0 Q 50 0 100 0 V 100 z";
          
          tl
            .to($path, { duration: 2.0,attr: { d: start }, ease: "power2.in"})
            .to($path, { duration: 1.6, attr: { d: end }, ease: "power2.out"})
            .from($logo, { duration: 2.0, y: 75}, '-=.8')
            .play(0);
        };

    animate();
  },[])

  return (
    <div className="App">
      <div className='wrapper'>
        <svg className="transition" fill='#1f1a1a' width="1000" height="1000" viewBox="0 0 1000 1000" preserveAspectRatio="none">
          <path class="path" 
            stroke="#000" strokeWidth="5px" dur="10s" 
            vector-effect="non-scaling-stroke" 
            // d="M 0 100 V 100 Q 50 100 100 100 V 100 z"
            d="M0 0.124567C0 0.124567 291.279 0.401434 502.888 0.124879C717.742 -0.155917 1000 0.124567 1000 0.124567 V 84 H 500 H 0 L0 0.124567 Z" 
          />
          <animateMotion repeatCount="indefinite">
            <mpath xlinkHref="#path" />
          </animateMotion>
        </svg>
        <svg className="logo" viewBox="0 0 18.31 18.31">
          <path fill="#ffffff" d="M7.47,17.61l-6.78-6.78c-0.92-0.92-0.92-2.44,0-3.36l6.78-6.78c0.92-0.92,2.44-0.92,3.36,0l6.78,6.78c0.92,0.92,0.92,2.44,0,3.36l-6.78,6.78C9.91,18.54,8.4,18.54,7.47,17.61z M6.94,11.31c2.09,2.09,3.15,2.34,4.5,0.98c0.83-0.83,1.65-1.75,2.23-2.79l-0.56-0.56c-0.64,0.86-1.49,1.69-2.41,2.61c-0.78,0.78-1.33,0.7-2.58-0.55l2.25-2.25c0.96-0.96,0.92-1.83,0.15-2.6C8.75,4.37,7.84,5.04,6.59,6.29C4.94,7.94,4.56,8.93,6.94,11.31z M7.38,10.26C5.75,8.64,6.2,8.16,7.34,7.03c1.09-1.09,1.38-1.2,2.43-0.14c0.33,0.33,0.3,0.68-0.14,1.13L7.38,10.26z"/>
        </svg>
      </div>
    </div>
  );
}

export default App;

 

Link to comment
Share on other sites

Hi @Xenex122,

 

It's really hard for us to debug without a minimal demo

 

On top of that as far as I can tell the d attribute is not something that the Attribute Plugin can parse and tween that easily. Complex strings are not that simple to tween, also that's what the MorphSVG Plugin is for:

Finally since you're using React I strongly recommend you to use GSAP Context, since you're not doing proper cleanup in your effect hook:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Have a look at the resources in this page as well:

 

Hopefully this helps.

Happy Tweening!

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...