Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Korben Dallas

Sine animation

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 everyone, i'm trying to reproduce this https://heliasoils.com

An animated sine background.

I tried to play around with a canvas but i'm kinda stuck

 

Do someone here have done a similar animation ? Do I need to use the canvas or something else ?

Finaly how to link the sine wave with greensock, to create a slider or even better animate it with the scroll ?

 

Best,

Enzo

 

See the Pen BaaWGex by Ziratsu (@Ziratsu) on CodePen

Link to comment
Share on other sites

Hi Enzo,

 

If you want to mimic the background wave animation there are a few samples going around in the forum:

 

 

If you're looking to mimic the image animation, that would be a bit more challenging. I'll start by trying PIXI displacement filter:

 

https://pixijs.io/examples-v4/#/filters/displacement-map-flag.js

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

Thank's for the hand, it's very helpfull to me actually :)

Have a nice day

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