Jump to content
Search Community

MorphSVG Loop and Scrollmagic

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

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.

 

 

Link to comment
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.

 

 

 

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
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...