Jump to content
Search Community

Floating Animation

arjay 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 good day to all,

I'm planning to do a interactive animation something like this http://www.drinkcann.com/, am interesting the floating cans. I do some testing but i can't make it as soft of this animation. Little helps is appreciated. Thanks

 

Link to comment
Share on other sites

Hey arjay and welcome to the GreenSock forums.

 

Most likely this has to do with your easing. A lot of the time it can be helpful to create a timeline of the positions for elements and then tween that timeline.

 

Can you please provide a minimal version of what you're tried so far? That would make helping you less abstract. 

  • Like 1
Link to comment
Share on other sites

Like I said, tweening the timeline makes it more smooth. It will take some playing around to get it more smooth.

 

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

 

To get the effect that they have on the site, you'll likely need to put the can in a container and move the container around based on the scroll position as well.

Link to comment
Share on other sites

23 minutes ago, ZachSaucier said:

I did in the post above... 

 

You're forgot something here.

TweenLite.to(tlCan, 27, {ease:Power1.easeInOut})

 

1 hour ago, arjay said:

My animation was a bit awkward, i can't make it smooth like my reference website. Thanks in advance.

 

Make everything random so changes in movement don't happen at the same time. Sine.easeInOut is also a better ease for changes in direction.

 

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

 

 

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

  • 1 year later...
  • 7 months later...

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