Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DigitalCardinal

Using Scroll to control MorphSVG

Recommended Posts

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);}
		});

 

Link to comment
Share on other sites

Hi @DigitalCardinal,

 

Welcome to the GreenSock Forum.

 

Tween the progress of a paused timeline with the scroll progress - like this:

 

See the Pen oOmyOZ by mikeK (@mikeK) on CodePen

 

Or use ScrollMagic. It depends on your concept / layout.

 

Happy tweening ...

Mikel

 

  • Like 4
Link to comment
Share on other sites

Hi @DigitalCardinal,

 

Welcome to the forum and thanks for joining Club GreenSock.

 

 @mikel has a nice demo there for you. ScrollMagic is also a good choice.

 

You could also look at the Intersection Observer. Here are a couple demos I made last year showing how it works. One of the animations is a morph. Maybe they'll give you some ideas.

 

See the Pen aLxJbZ by PointC (@PointC) on CodePen

 

See the Pen aLxmJp by PointC (@PointC) on CodePen

 

Happy tweening.

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi @DigitalCardinal,

 

Is this your project or just an example?

In this example, the morph effect is triggered by the scroll position. Where is your problem?

 

Kind regards

Mikel

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Since you're using jQuery, you can check the scroll value of the window element or any element you're using as a main wrapper for the site. This is an extremely simple example of using that particular way to update the progress of a GSAP instance:

 

See the Pen RNpBYx by rhernando (@rhernando) on CodePen

 

Happy Tweening!!

  • Like 3
Link to comment
Share on other sites

Mhh... just realized that @mikel's codepen (first answer in this thread) does exactly that... :roll:

  • Like 2
  • Haha 1
Link to comment
Share on other sites

I'm unclear on the follow up question here. @DigitalCardinal are you saying @mikel's demo is not working for your needs? As @Rodrigo mentioned, it seems to be the desired behavior. Are we missing something?

 

Thanks.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

If you want a simple approach, ScrollMagic would probably be a good choice. Here's a basic starter example of controlling a morph on scroll.

 

See the Pen dLLRvv by PointC (@PointC) on CodePen

 

Does that help?

  • Like 3
Link to comment
Share on other sites

Just a little problem with the tween:

 

// switch this
.setTween('#headerBottomMask',3,{morphSVG: '#headerBottomMask2', ease: Power0.easeNone}) 


// to this
.setTween(TweenMax.to('#headerBottomMask',3,{morphSVG: '#headerBottomMask2', ease: Power0.easeNone}))

 

That should get you working correctly. Happy tweening.

  • Like 3
Link to comment
Share on other sites

I just shortened the duration so you can see it a bit better, but it seems fine to me. 

 

See the Pen rbbqQo by PointC (@PointC) on CodePen

  • Like 3
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

Put 'em on a timeline and you'll be all set.

 

See the Pen axxQWv by PointC (@PointC) on CodePen

 

You can use a loop to go through and create a timeline for each group. Here's a basic example.

 

See the Pen BwEvLO by PointC (@PointC) on CodePen

 

Happy tweening.

  • Like 5
Link to comment
Share on other sites

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);
		});

 

Link to comment
Share on other sites

Yeah, I'm not sure what that .setTween is doing in the middle of the timeline, but you'll probably need it to be like this:

 

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


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

 

I'm not sure about the target2 since you don't have a new demo, but basically you'll need to have a morph start and end for each tween on the timeline. Hopefully that helps. Happy tweening.

 

 

  • Like 3
Link to comment
Share on other sites

@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!

  • Like 1
Link to comment
Share on other sites

Hi @DigitalCardinal

 

The SVGs are now a little tidier. You can summarize the two paths in one.
To emphasize the process, the waves are colored blue.
Unfortunately I do not have the time to explain all the changes.

 

See the Pen qwwGvW by mikeK (@mikeK) on CodePen

 

The information ...
The most important point: the correct assignment in the loop: new $ (". ClientsMask"). Each (function (i) {...

 

Then I cleaned up the DOM to get a better overview for me.

When obtaining SVG code from certain vector software there is a lot of additional info within the <svg> element. Their exclusion will not prevent your SVGs from rendering on the screen.

 

You can summarize the two paths in one SVG.

 

The SVG itself ('.clientsMask') is now the triggerElement and target1 for the loop.

 

To emphasize the process, the waves are colored blue and the morphing repeats once with yoyo effect.

 

triggerHook: "onEnter", duration, offset: please study the docs and examples of scrollMagic.

 

Happy tweening ...

Link to comment
Share on other sites

Hi @PointC,

 

I like your loop code ...

 

See the Pen NmVNpd by mikeK (@mikeK) on CodePen

 

11 hours ago, PointC said:

Just a little problem with the tween:

 

Just for info: the point was not the tween, but the missing plugin for .addIndicators().

Best regards

Mikel

 

 

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