Jump to content
Search Community

How could I make that type of morphing animation through scroll.

satyam 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

I'm not sure what part you mean. The scroll trigger or the morph?

 

For the morphing, please visit the docs page for the MorphSVG plugin. It has loads of information and links to many examples.

https://greensock.com/docs/Plugins/MorphSVGPlugin

 

For the scroll trigger, you could use a 3rd party library like ScrollMagic.

http://scrollmagic.io/

 

or maybe the Intersection Observer.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

 

@Sahil also provided some links for scroll trigger info in your other thread here:

You can also download the source files from the demo you posted here:

https://tympanus.net/codrops/2017/05/23/on-scroll-morphing-background-shapes/

 

We can't just build things for you, but if you have a specific GSAP question, please post a demo that demonstrates the problem or question and we'd be happy to help.. 

Happy tweening.

 

  • Like 3
Link to comment
Share on other sites

16 hours ago, satyam said:

Hey, I don't mean that.

I am asking that is it possible to make that animation ( when you scrolled on the website, background morph changes according to scroll).

 

Yes it is possible. If you look at the links I provided, you'll see how to create a morph and how to trigger an animation on scroll. 

  • Like 4
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.
×
×
  • Create New...