Jump to content
GreenSock

workwave

morphSVG with scrollmagic

Go to solution Solved by Carl,

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

Hey there!

 

First time poster here, just got my membership and I'd love to get some help on an animation I'm trying to merge with scrollmagic! 

 

I made this little SVG animation of a tree growing using TweenMax and it worked out pretty well. Now I'm trying to integrate it with scrollmagic and I'm having a hard time figuring out what's wrong in the process. 

 

I have the 8 different stages (paths) and I wanted them to occur based on scroll position.

 

I have a simple codepenn linked and if anyone could check it out and give me some pointers on what's missing or what needs to be changed in order for the animations to happen.

 

My JS experience is fairly limited but don't go easy on me I'm here to learn!

 

Thanks in advance and have a great day everyone!

Kind regards,

Bruno

See the Pen yJWgNK by bruno-gomes (@bruno-gomes) on CodePen

Link to comment
Share on other sites

Hello workwave, and Welcome to the GreenSock forum!

 

Glad you got a membership :D And thank you for the codepen example!

 

ScrollMagic is not made by GreenSock but it is made with GreenSock. It is a great scrolling management tool for GreenSock.

 

I am not personally familiar with ScrollMagic but Petr (ihatetomatoes), another moderator on these forums is really great at it. He has some helpful ScrollMagic examples and resources on his website.

 

ScrollMagic Cheatsheet:

https://ihatetomatoes.net/scrollmagic-cheat-sheet/

 

Simple ScrollMagic Tutorial:

https://ihatetomatoes.net/simple-scrollmagic-tutorial/

 

SVG Scrolling Animation triggered by ScrollMagic:

https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic

 

ScrollMagic Examples:

http://scrollmagic.io/examples/

 

ScrollMagic Documentation:

http://scrollmagic.io/docs/

 

I am sure other users in the forum who use ScrollMagic will be glad to help answer your question in full detail.

 

Happy Tweening!

 

:)

  • Like 3
Link to comment
Share on other sites

Hello workwave, and Welcome to the GreenSock forum!

 

Glad you got a membership :D And thank you for the codepen example!

 

ScrollMagic is not made by GreenSock but it is made with GreenSock. It is a great scrolling management tool for GreenSock.

 

I am not personally familiar with ScrollMagic but Petr (ihatetomatoes), another moderator on these forums is really great at it. He has some helpful ScrollMagic examples and resources on his website.

 

ScrollMagic Cheatsheet:

https://ihatetomatoes.net/scrollmagic-cheat-sheet/

 

Simple ScrollMagic Tutorial:

https://ihatetomatoes.net/simple-scrollmagic-tutorial/

 

SVG Scrolling Animation triggered by ScrollMagic:

https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic

 

ScrollMagic Examples:

http://scrollmagic.io/examples/

 

ScrollMagic Documentation:

http://scrollmagic.io/docs/

 

I am sure other users in the forum who use ScrollMagic will be glad to help answer your question in full detail.

 

Happy Tweening!

 

:)

 

Hey Jonathan!

 

I did some of Petr tutorials they are really a really good place to start out! Thanks for the resources i'll be sure to take a deeper look into the documentation.

 

I realized that the time is set to 2 seconds here:

//Tree Trunk
    tl.to('#tree0', 2, {
            morphSVG: {
                shape: '#tree1'
            },
            ease: CubicBezier.get("evolEase")
        })
        .to('#tree0', 2, {
            morphSVG: {
                shape: '#tree2'
            },
            ease: CubicBezier.get("evolEase")
        })
        .to('#tree0', 2, {
            morphSVG: {
                shape: '#tree3'
            },
            ease: CubicBezier.get("evolEase")
        })

This is probably not the correct approach since I need the scroll instead of timing? Not sure how to tie the tween/timeline to the scroll scene duration.

 

Thanks again ^.^

-Bruno

Link to comment
Share on other sites

I think you will have to use setTween(tl) after your GSAP timeline within your ScrollMagic scene. Having the tl instance go inside setTween() . That is what Petr tutorial states to do

 

https://ihatetomatoes.net/simple-scrollmagic-tutorial/

 

Also that setTween() method can be found here on the ScrollMagic Plugin Docs page:

 

http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween

 

Again I am no Scrollmagic guru, but that is where your tween instance is being referenced for ScrollMagic.

 

:)

  • Like 1
Link to comment
Share on other sites

Jon,

 

Since my original concept was made without scrollmagic and I later on started to integrate scrollmagic with it, and after your input, I decided to start over from scratch in a new codepenn. I tried to follow closely the tutorial, but when I try using the morphSVG instead of a regular tween changing properties, I just can't seem to get it to work with the scrollmagic  :(

 

Here is the link to the new codepenn: 

 

See the Pen Krjdoo by bruno-gomes (@bruno-gomes) on CodePen

 

And here is the javascript in case you don;t want to check the codepenn:

(function($) {
  wh = window.innerHeight,
  $treeStart = $('#tree0'),
	$treeEnd = $('#tree1');
  
  
// init controller
	var ctrl = new ScrollMagic.Controller({
	    globalSceneOptions: {
	        triggerHook: 'onLeave'
	    }
	});

  TweenMax.set('#trunk-left', {
        visibility: 'visible'
    });

   CubicBezier.create("evolEase", 0.96, 0.03, 0.24, 0.74);
  
// Morph tree0 path to tree1 path
  var treeStartToEnd = new TimelineMax();
  treeStartToEnd		
    .to('#tree0', 2, {
            morphSVG: {
                shape: '#tree1'
            },
            ease: CubicBezier.get("evolEase")
        });

  new ScrollMagic.Scene({
    offset: wh*0.6,
    triggerElement: ".container",
    duration: '80%'
  })
  .setTween(treeStartToEnd)
  .addIndicators()
  .addTo(ctrl);
  
  
  })(jQuery);

Any additional input by you or hopefully someone with experience on using morphSVG specifically with ScrollMagic would be very much appreciated!

 

What is bothering me is that I can get ScrollMagic and tweening to work without morphSVG and I also can get morphSVG to work without ScrollMagic...

 

I signed up for Club GreenSock because I want to use morphSVG specifically = \ Seems like such a powerful tool!

 

Thank you again

-Bruno

Link to comment
Share on other sites

When you comment out all the ScrollMagic code do you see your MorphSVG code animate ?

 

Also i notice in that codepen that you are using is an old version 1.16.0 of TweenMax. It should be using 1.19.0

//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js

:)

Link to comment
Share on other sites

  • Solution

Sorry to hear you are having trouble. 

FWIW, ScrollMagic has no idea you are using MorphSVG or what you are tweening. All it knows is that there is an animation that needs to be triggered at a certain scroll point.

 

I removed everything related to ScrollMagic from your code to verify that your morphing tween is working on its own (good job).

 

I then searched CodePen for "ScrollMagic" and chose the first super simple demo I could find and dropped one of our MorphSVG tweens into it.

 

ScrollMagic + MorphSVG http://codepen.io/GreenSock/pen/xOoOyv?editors=0010

 

As you can see the morph works fine. 

 

I found it difficult to troubleshoot your demo as you have position:fixed on your svg and the artwork is buried very far down.

I highly suspect there is something amiss in your basic html / css setup that isn't working well with ScrollMagic.

 

I wish I could help further, but like Jonathan has said, we really don't know the ins and outs of ScrollMagic so we can't spend a lot of time digging through to find the issues. 

 

I hope that with the demo I provided you can dump your SVG in and have a working example to start with and then make edits to match the design and layout you want.

  • Like 3
Link to comment
Share on other sites

Sorry to hear you are having trouble. 

FWIW, ScrollMagic has no idea you are using MorphSVG or what you are tweening. All it knows is that there is an animation that needs to be triggered at a certain scroll point.

 

I removed everything related to ScrollMagic from your code to verify that your morphing tween is working on its own (good job).

 

I then searched CodePen for "ScrollMagic" and chose the

See the Pen JodjPP by ncerminara (@ncerminara) on CodePen

I could find and dropped one of our MorphSVG tweens into it.

 

ScrollMagic + MorphSVG

See the Pen xOoOyv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

As you can see the morph works fine. 

 

I found it difficult to troubleshoot your demo as you have position:fixed on your svg and the artwork is buried very far down.

I highly suspect there is something amiss in your basic html / css setup that isn't working well with ScrollMagic.

 

I wish I could help further, but like Jonathan has said, we really don't know the ins and outs of ScrollMagic so we can't spend a lot of time digging through to find the issues. 

 

I hope that with the demo I provided you can dump your SVG in and have a working example to start with and then make edits to match the design and layout you want.

 

That was a nice demo for me to play with! I managed to get the different elements to morph at the trigger. 

 

Do you know why it does not work with scrollmagic 2.0.5 version? When I changed the 1.0.3 version in settings it messes it up.

 

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js

 

Thanks! 

-Bruno

Link to comment
Share on other sites

Sorry, I'm not up to speed on the various features and changes in different versions of ScrollMagic.

Link to comment
Share on other sites

Hi workwave :)

 

I'm pretty late to the party here, but in answer to your question about 2.05 - there are some syntax changes from earlier versions:

//old controller
var scrollMagicController = new ScrollMagic()
// new controller
var scrollMagicController = new ScrollMagic.Controller()
//old scene
var scene = new ScrollScene()
//new scene
var scene = new ScrollMagic.Scene()

You'll also need an additional file to get it to work with GSAP

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js

Here's a fork of Carl's pen which shows all the above changes and uses 2.05.

 

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

 

Hopefully that helps.

 

Happy tweening and scrolling.

:)

  • Like 3
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.
×