Jump to content
Deon Sosa

MorphSVG Loop and Scrollmagic

Recommended Posts

What I'm trying to achieve, is having GSAP looping trough some svgs and morphing them using MorphSVG. Then using ScrollMagic to pickup wherever the loop is and morph to a specific svg on scroll.

 

Is this possible ? 

 

What I'm doing is initializing TimeLineMax and adding a tweenlite to morph the svg. Then using ScrollMAgic to add the other tweenlite on scroll. This does not work since ScrollMagic pauses the TimelineMax loop. Any help would be appriciated.

 

 

Share this post


Link to post
Share on other sites

I'm not sure I follow your question, but I think it's safe to say there would be a solution to have the two libraries work well together for your needs.

 

Maybe you could make a demo?

Thanks.

  • Like 1

Share this post


Link to post
Share on other sites
4 hours ago, PointC said:

I'm not sure I follow your question, but I think it's safe to say there would be a solution to have the two libraries work well together for your needs.

 

Maybe you could make a demo?

Thanks.

 

I didn't create a demo because I am not sure on how to approach the problem. I'll try to explain it better. 

Let's say I have an SVG with three paths (a,b,c).

I'm morphing path a to path b back and forth using TimelineMax and morphSVG. This morph takes 20 seconds to complete.

Let's say  5 seconds of the animation have passed and the user starts to scroll.  Using ScrollMagic I'm trying to morph to path c from whatever the state of the svg is at 5 seconds into the animation. 

 

Hopefully this clarifies my problem.

 

 

 

Share this post


Link to post
Share on other sites

You'd probably want to use some ScrollMagic events to take control of the timeline.

http://scrollmagic.io/docs/ScrollMagic.Scene.html#event:enter

 

Rather than having ScrollMagic control the timeline on load, you'd have the tween/timeline playing automatically. Then you hit the trigger and tween the progress() to any position you like. Here's a demo from another thread, but shows the basic technique. The timeline is not part of the ScrollMagic scene, but when scrolling to the triggers you can pause/play it. 

 

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

 

Hopefully that helps. Happy tweening.

  • Like 1

Share this post


Link to post
Share on other sites
12 hours ago, Deon Sosa said:

Using ScrollMagic I'm trying to morph to path c from whatever the state of the svg is at 5 seconds into the animation.

 

You're in for a world of pain, I'd say.

 

The kink you have in your concept is that GSAP needs to know the starting path and the ending path. Right out of the bat you will have to figure out a way to create a brand new path right at the start of this scrollEvent that is based on this in-between state path that you are describing. I don't know from the top of my head how to do it and can't really spend the time to research it.

 

The good news is that would be the hardest thing. Once you have this new path you create a new tween to go from it to your path 'c' as the user continues to scroll. What happens next will dictate how much more pain you'll subject yourself to. If nothing else happens once the scroll is done. Fine, you're in the clear. If it needs to animate into another shape, get your logic hat on and plenty of coffee.

 

My suggestion to you is to read on how you can generate a path based on a path. It really could be as simple as duplicating a node. Actually it does sound like that's all you need to do.

 

Hum....

 

Just pause the looping animation and fire out a new morphing tween with the desired target path. Trigger those events like Craig described above.

 

Proof of concept:

 

See the Pen ac616f5a247c7442a883b1ea9a4de9a5?editors=1010 by dipscom (@dipscom) on CodePen

  • Like 3

Share this post


Link to post
Share on other sites

I think I misunderstood the question. I thought morph c was on the same timeline as morph a--> b so it would be automatically yoyoing between the first two labels and then tween to the end on scroll. My mistake.

 

Looks like the above solutions will take care of the problem. Nice work @mikel and @Dipscom👍

 

 

  • Like 1

Share this post


Link to post
Share on other sites

 

 

Thank you, @PointC!

Share this post


Link to post
Share on other sites

I ended up using the ideas described here. On pause I'm making a copy of the path being morph and then morphing that copy to the desired path. 

 

I'll make a pen showing the result.

 

Thank you @mikel @PointC and @Dipscom !

  • Like 1

Share this post


Link to post
Share on other sites

Deon, did you see my update on my first response? It turns out there is no need to make a copy of the path, you can tween straight away.

  • Like 4

Share this post


Link to post
Share on other sites
3 minutes ago, Dipscom said:

Deon, did you see my update on my first response? It turns out there is no need to make a copy of the path, you can tween straight away.

 

Ohh I see!. It wasn't working for me cause I was reusing the variable on the new Tween so it was using the old path. Instead I just have to target the path again.

Thank you !

  • Like 1

Share this post


Link to post
Share on other sites
17 hours ago, Deon Sosa said:

Here it is :)

 

Oh wow. So simples, so nice.

 

I is *totally* jealous. Be ready to be ripped off without warning.

  • Haha 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.