Jump to content
Search Community

Animate svg shapes

greg K 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

13 minutes ago, OSUblake said:

Do you have a GSAP question?

Yes!) How can I create something similar with GSAP? I mean how can I animate several blocks with linear-gradient-effect that completely overlap the image by hover on it? Or this is too much difficult? 

Link to comment
Share on other sites

Hey Greg and welcome to the GreenSock forums.

 

7 minutes ago, greg K said:

how can I animate several block with linear-gradient-effect that completely overlap the image by hover on it? Or this is too much difficult?

It's definitely possible. Here are the basic steps:

  1. Set up your SVG and image so that the SVG shapes that you want are the way that you want them.
  2. Animate the SVGs in the way that you want them to be animated. 

GSAP can help you do the the second step. But based on the information and setup that you've provided, it's impossible for us to help because we have no idea what your setup is like or how you want it to animate.

 

I recommend that you complete the first step and try the second step. Hopefully you won't even need our help! But if you run into an issue that you can't figure out, post about it in here and we'll see if we can help you.

Link to comment
Share on other sites

33 minutes ago, ZachSaucier said:

I recommend that you complete the first step

 

Ok. I've done.

 

As you can see in my codepen, there are several blocks (diamonds, if you want). and if you reload pen, you'll see the animation that i want to have with hover effect. And I really want you to help me realize this with GSAP)

Link to comment
Share on other sites

22 minutes ago, greg K said:

I really want you to help me realize this with GSAP

How about you give it a shot first?

 

You need to make sure to load GSAP (you can from https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js). Then you can animate the stop colors using an approach similar to the one below (that I found with a quick Google search):

 

Link to comment
Share on other sites

14 minutes ago, OSUblake said:

you can use a pattern to cover your image.

Wow! Thank you for that. It'll really simplify my life. But i'm confusing by ID in svg, cause what if we'll have a few similar images with covering by the same svg-pattern?

Link to comment
Share on other sites

I'm not exactly sure what you mean, but there can only be one unique ID anywhere in your HTML/SVG. If you need to animate the same pattern for different images, at different times, then you will need to duplicate the pattern/gradient markup, and give them different IDs.

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