Jump to content
Search Community

Using Scroll to control MorphSVG

DigitalCardinal 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

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

@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

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

@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

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

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

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