Jump to content
Search Community

workwave

Members

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Posts posted by workwave

    Looking for a more efficient / shorter way to have multiple elements morph with one trigger

    in GSAP

    Posted

    Hey Bruno,

     

    Is this what you need it to do?

     

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

     

    Hopefully I understood your desired outcome correctly.

     

    Happy morphing.

    :)

     

    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');
  }
})();

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

     

     

    Working perfectly thanks a bunch PointC!

    • Like 2

    Looking for a more efficient / shorter way to have multiple elements morph with one trigger

    in GSAP

    Posted

    Hi workwave  :)

     

    If you want to morph a lot of paths at one time, you can easily loop though them and make that happen. I made a pen a few months ago to demonstrate that possibility. It may prove useful to you.

     

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

     

    Hopefully that helps a little bit.

     

    Happy morphing.

    :)

     

    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:

     

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

     

    Let me know if you have any clues on why is that =]

     

    Kind regards,

    -Bruno

    Looking for a more efficient / shorter way to have multiple elements morph with one trigger

    in GSAP

    Posted

    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

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

    morphSVG with scrollmagic

    in GSAP

    Posted

    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

    morphSVG with scrollmagic

    in GSAP

    Posted

    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

    morphSVG with scrollmagic

    in GSAP

    Posted

    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

    morphSVG with scrollmagic

    in GSAP

    Posted

    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

×
×
  • Create New...