Jump to content
GreenSock

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

Animating between two SVG shapes to look like gentle swaying

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

Hello!

 

I am trying (hoping) to achieve SVG tulips to look like they are gently swaying from left to right in a type of 'evening breeze'. 

 

The way I have thought about it, is to have two outlines for each tulip and the morph between these two oulines back and forth to give the idea that its slightly moving. 

 

Erm... So looking at my CodePen, the result ended up being faaaaarrr from that... :shock: 

I thought trying to change the index point might help. But its still rather messy. Another issue could be that the outlines are too complex different. I am now not even sure if morphing is the way to go. 

 

I did have a close look at the GSAP WaveSVG function (the one for the morphing green cape), bit that is way to complex for me. 

 

I also found a previous article in your forum: 

This CodePen from the article is really lovely. 

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

It is this effect I was thinking about. But not sure how to apply that to SVG tulips...

 

Any ideas? Is it possible? Do I need to work on the SVG shapes more? 

 

Thank you in advance. 

See the Pen 09c0cc7ccf25273c17b13390b61339a9 by semblance (@semblance) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums, 

 

Thanks for the demo. This is an interesting effect. If you want to use morphSVG I think your best bet would be to break your tulips into multiple paths like:

 

#tulip1Flower

#tulip1Stem

#tulip1Leaf1

#tulip1Leaf2

 

and morph them each into their respective end shapes like

 

#tulip1Flower-end

#tulip1Stem-end

#tulip1Leaf1-end

#tulip1Leaf2-end

 

To be honest, to make this look really good I think its going to be a bit tedious and take a lot of experimentation. You might do better just rotating some of the elements slightly and morphing the stems bending a little bit.

 

  • Like 2
Link to comment
Share on other sites

Hello Carl

 

Thank you for your quick response. I have not actually thought of maybe breaking it up as you mentioned. 

Using the 4 pieces and rotating/moving them slightly could most probably give the effect I am after. 

 

 

The world would not come to an end if it doesn't work, but I am indeed curious!

 

Thanks again! 8-)

Link to comment
Share on other sites

Hi Semblance,

 

Carl is on the absolutely correct path - including the trail and error aspect.

 

Just for a start here a red tulip:

 

See the Pen qmMdGV by mikeK (@mikeK) on CodePen

 

 

Happy swaying ...

Manfred

  • Like 3
Link to comment
Share on other sites

Hello Manfred

 

That is really lovely! Exactly the result I was trying to do. 

Also setup really nicely, so that I can wrap my novice head around it. 

Thank you for setting up the CodePen. Looking forward playing around with it. :-)

 

 

All the best!

  • Like 1
Link to comment
Share on other sites

Still on the same topic...

(Doing this animation also in the process of learning and wrap my head around GSAP timelines...)

From the suggestions made in the thread and @mikel's demo:

See the Pen qmMdGV by mikeK (@mikeK) on CodePen

 

I got something going myself with the initial pen I posted: 

See the Pen 09c0cc7ccf25273c17b13390b61339a9 by semblance (@semblance) on CodePen

 

 

I have a feeling the approach I took, applying this effect to multiple items 'tulips' is not the best one. It would be good to know of a good approach, also for me moving forward using GSAP (the correct way). 

 

In this example, the flower head and leaves use the same animations, which I've added to one timeline and therefore just want to re-use that for all the flowers. 

The stems however, use a different timeline for each, because the end path of the morphing is in a different place on the SVG viewport (or that is how I see it, but please advise otherwise).

For each flower I've made its own timeline for the morphing stem and then nesting the flower timeline within.

 

I am wondering if this is the right approach. I am also struggling with the timings.

I would like each flower's animation (as a whole) to start very slightly after each other. I have searched online, but can not seem to find anything... almost like the timelines of each flower need to 'stagger' after each other. 

At the moment all the bits seem out of sync...

 

I don't understand the '0' at the end of the Morphing of the tween. If I remove it, the morph does not work. Is that an absolute time? In the syntax and code examples it is not necessarily there. 

 

Any thoughts / advice would be much appreciated. :-)

Link to comment
Share on other sites

Hi Semblance,

 

if every tulip has its own tween you can handle both: 
different animations per tulip plus an individual timing between the tulips.

 

Try to play with timings and also with different easings ...

 

I could not fork your pen so here a copy:

See the Pen VbEqqY by mikeK (@mikeK) on CodePen

 

Regarding the '0' please have a look to: https://greensock.com/position-parameter

For the tulip tween: every tween starts at the beginning = 0 not one after the other. 

 

Happy swaying

Manfred

 

  • Like 1
Link to comment
Share on other sites

Hi @Semblance :)

 

Looks like you're getting pretty close to what you want. When you have some action that is going to happen over and over, you can make the code do the heavy lifting by using a loop. In your demo, we can loop through each of the tulip groups and create the animation for that group. That timeline is then added to a master which is repeated as much as you like. I used a variable for the duration and the position of each timeline on the master so you can adjust those to your liking. I'm not sure if this fork of your demo is exactly what you wanted, but it should get you started.

 

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

 

Regarding your question about the 0 at the end, that is the position parameter. As @mikel mentioned, you can read more about that here:

https://greensock.com/position-parameter

 

Hopefully that helps. Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Hi guys

 

Thanks again for looking into this. I think it came out really nice!

I have also made a thorough study of the code and resource/s. 

Which will be really helpful for future projects/pens too!

 

@PointC there is just one thing that is not too clear to me - where you added the following as the first line:

TweenLite.defaultEase = Linear.easeNone;

 

Weird question... but because it is not wrapped in a function with everything else, how does the master timeline 'know' to use that as the default easing equation?

 

All the best!

8-)

Edited by Semblance
I ended up having another question to add
  • Like 2
Link to comment
Share on other sites

You were using Linear for all your tweens so I just set a new default to save some typing. It's not necessary, but when your project is using a specific ease multiple times, it can be helpful to set a new default. Every tween after that will use the new default if you don't specify one. You can still override it on individual tweens whenever you like.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

Aaaah! That is a good one to know!

 

Thank you!

  • Like 1
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.
×