[Morphing a ClipPath]

I've read other threads and it seems this is possible to morph the ClipPath.  However, the issue people have is with properly targeting the Paths and such.  I've tried so many variations, but the Shape isn't morphing.

See the Pen zQqxrN by DigitalCardinal (@DigitalCardinal) on CodePen

[Using Scroll to control MorphSVG]

@PointC looks like I had my order of operations incorrect.  Got it working.  Thanks so much for the help!  Everything is working great now.  Fantastic support!

[Using Scroll to control MorphSVG]

Again, thanks @PointC  I'm getting "cannot morph a <UNDEFINED> element" so my selectors must be wrong somewhere.  Recreated the concept in CodePen.

 

See the Pen eooxpV by DigitalCardinal (@DigitalCardinal) on CodePen

[Using Scroll to control MorphSVG]

Huge thanks to everyone, @mikel, @PointC

 

I have the timeline part working.  Now wrapping up the loop.  I'm close, but have a syntax error.

 

$(".entry-content").each(function(i) {
			let target1 = $(this).find(".clientsMask");
			var darkMask = new TimelineMax();
				darkMask.from(target1, 1, .setTween(TweenMax.to('.clientsMaskPath',3,{morphSVG: '.clientsMask2Path', ease: Power0.easeNone}))

			new ScrollMagic.Scene({
				triggerElement: this,
				duration:'300',
				offset:'20%'
        	})
			.setTween(darkMask)
			.addTo(controller);
		});

 

[Using Scroll to control MorphSVG]

@PointC thanks.  I'm getting really close.  How would I run multiples of this?  Meaning within my SVG I have multiple paths and I need them all to morph (the lines).  Currently only the last entry is morphing.

 

Also, is it possible to have this function for multiple instances of same class/morph on a page?  Basically if I have an element I want to use over and over on a single page.  Currently it only animates the first instance.

 

EDIT*****  I have them all working in the CodePen.  Just curious if there is a cleaner way.  Also still curious about multiple instances of same morph.

 

See the Pen axxRge by DigitalCardinal (@DigitalCardinal) on CodePen

[Using Scroll to control MorphSVG]

@PointC not working for me.

[Using Scroll to control MorphSVG]

Trying to use @mikel's demo in my playground I'm stuck.  What am I missing?  

 

See the Pen LvvgZa by DigitalCardinal (@DigitalCardinal) on CodePen

[Using Scroll to control MorphSVG]

Thanks to everyone ( @mikel @Rodrigo @PointC )!!!  I guess my issue here is I am not familiar enough with how this all works to take what I have working and convert it to those examples.

[Using Scroll to control MorphSVG]

@mikel thank you so much for responding!  This is a snippet of my project.  I have it working on multiple svg "masks" on the homepage.  The morph is triggered by scroll position just like you said.  However the client is now asking if rather than just triggering it, can the morph be controlled back and forth with the scroll bar.  Rather than triggering it and it runs completely, as the user scrolls down the animation moves forward/backward at the speed of the scroll.  Much like the morph in @PointC's first Codepen, except backward and forward.  I guess similar to Scrollmagic.

[Using Scroll to control MorphSVG]

Thanks @mikel and @PointC

 

So I'm pretty newb on this.  Any way to take the existing code and modify it to work?  As I said I have this concept working on 5-6 different SVGs in my homepage.  Each with different curved SVGs morphing.  

 

Here is a Codepen that shows what I'm trying to do.  

See the Pen PgLaJm by DigitalCardinal (@DigitalCardinal) on CodePen

[Using Scroll to control MorphSVG]

So I have multiple morphs running on the same page.  Currently they all work great, however the client has asked if the user can control the animation on scroll rather than simply triggering it.  Being new to GS I'm a bit lost in this.  Here is the code I was able to pull from elsewhere to get the animations working in their current state.  How would I modify this to have the animation controlled by the scroll bar both up and down?

 

var scrollMorph1  = new TimelineLite({paused:true})
		.to("#headerBottomMask",1, {morphSVG:"#headerBottomMask2"},0)
		.to("#headerBottom01a",1, {morphSVG:"#headerBottom01b"},0)
		.to("#headerBottom02a",1, {morphSVG:"#headerBottom02b"},0)
		.to("#headerBottom03a",1, {morphSVG:"#headerBottom03b"},0)
		.to("#headerBottom04a",1, {morphSVG:"#headerBottom04b"},0)

		$(window).scroll(function() {
			var scrolled = $(window).scrollTop();
			var diff = 20;

			if ($('#header h1').length > 0) {
				var object1 = $('#header h1');
				var topOfRange1 = object1.offset().top + diff; 
			}

			if (scrolled > topOfRange1 ) {
				scrollMorph1.play().timeScale(1);
				} else {scrollMorph1.reverse().timeScale(1);}
		});