Jump to content
Search Community

MorphSVG on click

Bernt 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

Hi! New to this, well basically new to coding in general. Tried finding a similar project/post, but haven't found anything. Hopefully someone can point me in the right direction

 

I have four SVG shapes that i want to morph step by step.

 

So: shape 0 > shape 1 > shape 2 > shape 3 > shape 0 (and loop).

 

I want the shapes to loop, but also want to force jump to next shape on click. If that makes sense.

See the Pen gGOJbV by Bernt (@Bernt) on CodePen

Link to comment
Share on other sites

Hi @Bernt!

 

Welcome to the forums!

 

When you say you're new to coding in general, how much do you know? Can you add the buttons and have them trigger calls?

 

To point you in the direction without writing the actual code, here's what you need to do:

 

  1. Create a timeline that loops (TimelineMax will do the trick super easily)
  2. Use a TimelineMax's .to() method for each of the shapes, each with a unique label attached to it (Check the position parameter in the docs).
  3. Add your buttons to call one of a variety of methods/techniques to jump to the desired label depending on the desired effect

 

I'm sure there are other ways as well, people here are pretty good at coming up with ideas how to achieve things.

 

Happy tweening!

  • Like 5
Link to comment
Share on other sites

@PointC This is perfect! Thanks so much for the reply.

 

I might be able to find it somewhere on the world wide web. But I'll ask here just incase I don't find anything.

 

Two questions.

1. Is it possible to at edit the Y,X position of each shape, so that it moves to different parts of the screen on click?

2. Can i make the morphing play automatically?... Let say after 5 seconds, it would morph to the next shape with out having to click anywhere (but still keeping the click function)?

Link to comment
Share on other sites

Yep - both those things are possible.

 

1. Moving to a new x/y position: You could animate the path to a new x/y position on each morph. Those coordinates could be pulled out of an array and used in the morphing tween. Or you can have your target paths at different positions. Remember that you will not only be morphing to a new path shape, but also a new path position if the new one is someplace else. Here's a pen I made for another forum question, but shows that morphs will move to the new path position:

 

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

You can see in one version the target paths are at the corners and they are all stacked on top of each other in the other version.

 

2. Autoplay the morphs: I think the easiest way to modify my first demo for an automatic play would be to modify the button click function so it's accessible via a delayedCall tween too. The delayed call will run the function every 5 seconds (it's a variable so change it to your liking) unless a button is clicked and interrupts it. Once the morph tween plays via a button click, it will once again call the function that starts the delay autoplay cycle again.

 

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

Hopefully that makes sense and helps a bit. Happy tweening.

:)

   

  • Like 5
Link to comment
Share on other sites

Awesome answer, @PointC! Above and beyond as usual. 

 

Just for kicks, here's a slightly different version that shows how you can use a single delayedCall() instance and simply restart() it in the makeItMorph() method. And it uses slightly different logic for the incrementing/decrementing...

 

See the Pen eGNwgr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

  • Like 5
Link to comment
Share on other sites

ahhhh... passing the increment/decrement into the function and simply restarting the delayed call. Very slick Jack. B)

 

That also avoids using kill() too. What can I say? It's Friday at the end of a long week and I needed to take out some aggression so I had to put a kill() in there. :lol:

 

Thanks for the schooling. 

:)

 

  • Like 3
Link to comment
Share on other sites

2 hours ago, PointC said:

ahhhh... passing the increment/decrement into the function and simply restarting the delayed call. Very slick Jack. B)

 

So weird. I made a demo earlier that is nearly identical to that, but I didn't get around to posting it in time. It's just a modified version of something I made for another question.

 

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

 

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

That's great Blake. It's always an education seeing you and Jack post a demo for the same question. I see many similarities, but differences too. It helps me learn and hopefully get better. Right now I have a high degree of confidence that I can make almost anything work with JS. It may not be the best way, but it will work so I feel good about that part. Now I want to get better at writing more efficient, shorter and flexible code. Small demos like this help.

 

One of these days I need to take your advice and write a little game for practice. Maybe when each day contains an extra 20-30 hours I can get to all the things I'd like to learn. ;)

 

Thanks again for all the schooling around here. 

:)

 

  • Like 4
Link to comment
Share on other sites

Jesus you guys are amazing.

 

I'm getting there, like I said I'm pretty new to all this. So just wrapping my head around what is happening in the JS codes is enough to get me confused.

Got the autoplay and click on body (not on a button) to work. Now all I need to figure out is the X,Y position and controlling the size of the paths and I have exactly what I was aiming for.

 

(edit, so I finally figured out that the X,Y position can be controlled when exporting the SVG from illustrator. So now it works... Still trying to figure out how to control the size of the shapes)

 

Thanks so much for all the replies. Very impressed!

  • Like 3
Link to comment
Share on other sites

On 9/16/2017 at 11:31 AM, PointC said:

One of these days I need to take your advice and write a little game for practice.

 

Do it! I'm sure you will learn a lot just based on the simple fact that the more code you write, the better you get. 

 

Coming up with the logic to make your game run correctly is something you will have to come up with on your own, so using a library like jQuery or GSAP won't be of much help for that. Something that looks like it might take a couple hundred lines of code can quickly turn into thousands of lines of code. It's surprising how much thought has to go into making even the simplest of games.

 

Just ask @Dipscom. He's finishing up work on a little game. Well, little to uninitiated. I'm sure it's huge to him.

 

 

  • Like 1
Link to comment
Share on other sites

44 minutes ago, Dipscom said:

I wouldn't call it a game after the client's touch but I did have the "making a game" mentally on it.

 

It might not be what you initially envisioned, but I would consider it a game. There are objectives and it is interactive. 

 

If you want to try your hand at making some games, I would recommend starting out small. So nothing with a game loop or any complicated rendering. I started with tic-tac-toe and memory/concentration games.

 

Something to think about. How would you figure out the winner in tic-tac-toe? There is no correct way, but it is pretty interesting to see all the different approaches people come up with.

Link to comment
Share on other sites

Topic hijack here we go! :D

 

Your comments and suggestions are always great @OSUblake, I'll definitely be doing something. Coincidentally, I am halfway through watching a "how-to" making a tic-tac-toe game. It's just, as you know, that I have too many things in my "to learn" list and I am horrible at keeping focus.

 

A project like that is great because it forces me to focus, whether I want it or not.

 

What I should really do is to stay unemployed for a month or more and do a forced project on something.

Link to comment
Share on other sites

Total hijack... but we're still listening if @Bernt needs anymore help. ;)

 

28 minutes ago, Dipscom said:

What I should really do is to stay unemployed for a month or more and do a forced project on something.

 

Nothing wrong with that if you can afford it. Figure out if you might come out ahead by learning several new skills over a month. It might pay off much quicker than taking an unfocused approach.

 

What tic-tac-toe video are you watching? I'm curious to see how they determine a winner.

 

When you get more advanced, here's some pretty interesting games that might be worth trying to recreate.

http://www.lessmilk.com/games

 

  • Thanks 1
Link to comment
Share on other sites

6 minutes ago, PointC said:

I started coding a tic-tac-toe game, but got a strange alert().

 

It said "Greetings Professor Falken. Shall we play a game?"

 

Should I continue coding or could this lead to problems?

 

When that happens, you need to use the back door. The password is "Joshua". See if that helps.

  • Like 1
  • Haha 2
Link to comment
Share on other sites

These are great! Thanks a bunch Blake. And the list just grows...

 

The video is this: 

 

 

The fact that I, somehow, photobombed this video is mere coincidence - honestly - but I will cling to my 5 seconds of fame with all my might. 8-)

 

In all honesty, money-wise I could afford not working for a month. What I don't do is say no to people. :| 

 

And so, when clients call saying: 'Hey can you do X for me?' And I'm not already working two other projects, on top of my normal life, I'll say 'yes'. Even if what they want me is to mown their lawn...

 

So, I'm my own enemy really. 

 

Kids, listen to your elders, don't be like them...

 

- Ps: Can either of you tell me what the Falken and Joshua references come from? I want in, in the joke. ;) 

  • Like 3
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...