Jump to content
GreenSock

Priyank Tyagi

Animation

Recommended Posts

Hello priyank,

welcome to the club I’m sure that you will enjoy it.

thats a great web site but it is also complex in the sense that different devices display the content in different ways using media queries and or gsap matchmedia.

much of the site is done with scrolltrigger type animation and I see that there is a parallax effect and some pinning.

on my tablet I also get a wave like reveal using a mask or clip effect.

 

there is a lot to cover here. 
scrolltrigger and parallax effects are well covered along with some introductory videos in the learning section of the web site.

i suggest that you take some time to look at the fundamentals but parallax effects can be done with a simple translation or a more recent post looked at changing the padding on an image with along with a scale.

 

if you are interested in the wave effect then I think that @pointC is the expert on masking and clipping and he has posted various basic approaches but this one is more dynamic and advanced.

Link to comment
Share on other sites

thanks, @Richard1604  sir for your time. I have use scrollmagic and all but how to achieve this wavy effect image change. I want that.

Link to comment
Share on other sites

I wondered...

this post has some basic clips and masks

but as i mentioned the wavy effect is a bit more complicated.

The best I can suggest is a MorphSVG clip based on a bezier path but I think that you really need more some expert advice.

  • Thanks 1
Link to comment
Share on other sites

Hi Priyank,

 

I'm just starting out with GSAP and I was interested in this effect as well. From reading a few different posts, i think this effect is actually WebGL. Codrops has some good examples, but one in particular looks very similar.

 

If you mess with the width and X/Y scales, you can see it here:

https://tympanus.net/Development/webGLImageTransitions/index.html 

 

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

The core of it (pinning, revealing an image on hover) can be done with ScrollTrigger. The actual wavy effect could be done using clip paths or masking or WebGL. Unfortunately we don't have the capacity to create tutorials for every effect that people post to our forums but if you have a specific question feel free to ask and we'll do our best to help.

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