workwave

That was perfect ^.^ exactly what I needed to make it work!! Here is the final code: (function(){ function sceneHelper(sectionA, sectionB, sectionC) { var stage; var master = new TimelineMax(); var scrollMagicController = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: sectionA, duration: '100%', triggerHook: 1 }); for (i = 0; i < 6; i++) { stage = TweenMax.to(sectionB + i, 1, {morphSVG: sectionC + i, ease:Linear.easeNone}); master.add(stage, 0); } scene.setTween(master).addTo(scrollMagicController); scene.addIndicators(); } //Call scene helper for each item if (typeof ScrollMagic !== 'undefined') { sceneHelper('#section1', '#sectionZero', '#sectionOne'); sceneHelper('#section2', '#sectionZero', '#sectionTwo'); sceneHelper('#section3', '#sectionZero', '#sectionThree'); sceneHelper('#section4', '#sectionZero', '#sectionFour'); sceneHelper('#section5', '#sectionZero', '#sectionFive'); sceneHelper('#section6', '#sectionZero', '#sectionSix'); sceneHelper('#section7', '#sectionZero', '#sectionSeven'); } })(); http://codepen.io/bruno-gomes/pen/BLBvJk Working perfectly thanks a bunch PointC!

Hey PointC! Thanks for the demo! It did help me get all the paths morphing done in a shorter way. However, I'm having an issue tying it to the scrollmagic scene. When I add it to the scene, the last path works properly but the ones before it don't. They run automatically instead of morphing with the scrolling. Here is a code penn with an example: http://codepen.io/bruno-gomes/pen/NRKpjw Let me know if you have any clues on why is that =] Kind regards, -Bruno

I'm trying to come up with a "better" way to write these morphSVG animations. The issue is that I have about 100+ paths I want to animated all at once. Everything works fine but I'm assuming there must be a more efficient way to do this, maybe with some sort of loop and an array? Then a function that gets called each time it loops? As of right now my project has like 2000 lines of JavaScript and I'm not even finished! In the codepenn you will find a small example with six different elements I'm morphing at the same trigger point. Thanks in advance and have a great day everyone! Kind regards, -Bruno

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

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: http://codepen.io/bruno-gomes/pen/Krjdoo 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

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

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