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

[satyam 0 Likes (Newbie)]

Show first: https://tympanus.net/Development/MorphingBackgroundShapes/

Can anybody know how to make that type of morphing animation through scroll with Gsap.

Guys, please help me.

 

[PointC 8,599 Likes (Superhero)]

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.

 

[satyam 0 Likes (Newbie)]

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

[mikel 1,823 Likes (Superhero)]

Hey @satyam,

 

The ruling: like boys / girls first.

 

Please prepare an example (CodePen) as far as you can.
Then surely a helpful hand will come.

 

Kind regards

Mikel

 

 

[PointC 8,599 Likes (Superhero)]

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.