Jump to content
GreenSock

Creativist-Lab

"Best" way to animate the following

Go to solution Solved by OSUblake,

Recommended Posts

Hello all,

 

I'm asking for some general advise/workflows since I'm totally new with the following.....

 

I created some SVG's in the form of trees and now I would like to animate them in such a way that they seem to move subtle in the wind.

Most likely I need to manipulate each path separate in order to have a realistic effect, or is there an easier way to go about this? And when each path needs to be manipulated separate, what would be the easiest to do this?

 

Anyway all tips are most welcome!

 

Thanks everyone.

Link to comment
Share on other sites

1 hour ago, Creativist-Lab said:

Most likely I need to manipulate each path separate in order to have a realistic effect, or is there an easier way to go about this? And when each path needs to be manipulated separate, what would be the easiest to do this?

 

There's probably not an easy way to do that. You could try with the MorphSVGPlugin, but it might not work well depending on how complex your trees are. And then if you have a bunch of trees, you're probably going to be running up against the performance limitations of SVG. I made some grass blades, and the shape of blade is relatively simple, but SVG could not handle animating a screen full of them.

 

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

 

  • Like 4
Link to comment
Share on other sites

Hello all, I started playing around with the MorphSVG plugin and so far so good. I'm very new to all of this (coding in general) and I'm running into some things that i hope someone can help me with (see the codepen demo). When you hover over the trees they start to wiggle, what i would like is the trees to finish the wiggle sequence on mouseleave and reverse when leave so that the sequence will start again with another mouse enter... Is there a way to do this? Also I'm sure that the code that I've written is not very clean and optimized, when possible I would like to have some tips on how to improve this also. Thanks once again in advance!

 

See the Pen OJxMdOe by JeroenVn (@JeroenVn) on CodePen

Link to comment
Share on other sites

  • Solution

I don't know if I'd reverse it on mouseleave. I'd only play it on mouseenter, and if it's running, just exit the function. You can use isActive to check if the animation is running.

https://greensock.com/docs/v3/GSAP/Timeline/isActive()

 

jQuery(".trees").on("mouseenter", "#bigtreeleftnew", function(){
  if (tlTrees.isActive()) return;
  tlTrees.restart();
  
}).on("mouseleave", "#bigtreeleftnew", function(){    
   // tlTrees.reverse();  
});

 

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