Jump to content
GreenSock

_jeremy

Weightlessness effect on elements

Go to solution Solved by GreenSock,

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 all,

 

First of all, thank you for this awesome library, he help me a lot on my projects. Really big thanks.

Today i can find a way to do a little improvement for my current project, i need to make a bunch of element "floating" like a weightlessness space object.

Here a pen with my current animation, i need to stagger them to create a random movement for each element (don't do the animation synchronously).

 

So in a wonderful world, if we have a way to make more "floating" (not like my pen example in single path, with more axis movement and a random start for each element) would be super perfect.

Hope i was clear,

 

Thanks a lot

See the Pen rrgVpP by anon (@anon) on CodePen

Link to comment
Share on other sites

Hello _jeremy, and welcome to the GreenSock Forum!

 

Have you looked at the GSAP ModifiersPlugin or even using the cycle special property that works with stagger tweens.

 

cycle special property for stagger tweens:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFromTo/

 

 

ModifiersPlugin (function based values):

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ModifiersPlugin/

 

 

:)

  • Like 1
Link to comment
Share on other sites

  • Solution

There are a bunch of ways to do something like this. Remember, 1.19.0 adds function-based values too, so you can feed a bunch of elements into a tween and use a function to make each one go to a different x/y position. Or just do a loop like this:

http://codepen.io/anon/pen/dpEEgM?editors=0010

 

Play with the numbers in the variables to get the effect you're after. 

 

I'm working on another fun tool that could help too - CustomWiggle which leverages CustomEase (available to club members for now, but will be more widely released in a few weeks):

http://codepen.io/GreenSock/pen/3566533ea0bf699796bb4d696bd1ca50/

 

(To understand CustomWiggle a bit better, see this demo: http://codepen.io/GreenSock/pen/LRqkOr?editors=0010)

 

If you'd like an advanced copy, let me know and I'll get it to you. But you shouldn't really NEED it for this. :)

  • Like 2
Link to comment
Share on other sites

Hi guyz, thank you so much for your advices ! if i can make it i'll be back here, cheers !

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