36 thoughts on “SVG Scrolling Animation Triggered By ScrollMagic”

1. Aaron T Grogg February 26, 2015 at 7:58 am

   Hey, Petr, cool effect, would be nice if the article linked to the products you’re using somewhere.

   Cheers,
   Atg

   Reply ↓
   1. Petr Tichy Post authorFebruary 26, 2015 at 8:42 am

      Thanks Aaron, I will update the post and link to both ScrollMagic and GreenSock.

      Reply ↓
2. Thisara J. Udawela May 26, 2015 at 7:52 pm

   Thank you sir. It’s very helping…

   Reply ↓
   1. Petr Tichy Post authorMay 28, 2015 at 11:48 pm

      Thanks Thisara

      Reply ↓
3. Al Lemieux June 2, 2015 at 11:04 pm

   What if the content in your scene is taller than the viewport and you have other scenes after it? Seems like Scroll Magic doesn’t like this.

   Reply ↓
   1. Petr Tichy Post authorJune 2, 2015 at 11:26 pm

      Hey Al, ScrollMagic can work things out for you, but you would need to adjust the CSS and JS.

      Not every “visual” scene needs to be a ScrollMagic scene, you can mix it up to achieve the effect you’re after.

      Reply ↓
4. Al Lemieux June 10, 2015 at 4:46 am

   Petr,

   Do you know if ScrollMagic can do this: http://pitchinteractive.com/nie-rmo-1429290178319

   The scroll action is not continuous. I don’t think ScrollMagic is made for this kind of thing, but what do you think?

   Reply ↓
   1. Petr Tichy Post authorJune 11, 2015 at 4:19 pm

      You’re right Al, ScrollMagic is not build for this and I am not a big fan of this approach either, however a while ago I wrote this One Page Scroll with animations tutorial.

      Really consider whether you need to disable the native scrolling behavior before implementing it in your own project.

      Reply ↓
5. Greg June 15, 2015 at 1:19 pm

   ‘triggerOffset’ doesn’t seem to be recognised and looks like it should be ‘offset’.

   ‘offset’ used in the doc examples
   http://janpaepke.github.io/ScrollMagic/examples/advanced/advanced_tweening.html

   Reply ↓
   1. Petr Tichy Post authorJune 15, 2015 at 1:52 pm

      You’re right Greg, this has been changed in the ScrollMagic 2.0 update. I am using an older version in this demo.

      Thanks for pointing this out.

      Are you working on a ScrollMagic project or just having fun with scrolling animations?

      Reply ↓
6. Michael J Brett June 24, 2015 at 8:50 pm

   Your sample code contains a small error I think.

   You quote “The triggerElement element for this animation is set to #screen2 .imacInner, which is an absolute positioned div with fixed dimensions defined in the stylesheet.”

   However in the CSS you have .imacInner set as position: relative

   Reply ↓
7. Nick December 6, 2015 at 2:13 am

   Hi Petr,

   I bought some time ago the Skrollr tutorials from you, and now I am digging deeper into Skrollmagic, it really is magical 🙂
   Had one question I’d hope you could help me with:
   I am trying to achieve blur effect on a div, starting at the top when div reaches viewport and finishing at the end (height of the div), no problem there by setting up the code, only when the animation starts it automatically jumps from 0 blur to 10px(example) of blur.
   Any idea on this matter?
   {‘-webkit-filter’: ‘blur(10px)’}
   (other transitions work, such as opacity and so).

   Thanks a lot for the tutorials.

   Reply ↓
   1. Petr Tichy Post authorDecember 6, 2015 at 9:51 am

      Hi Nick, great to hear that you are enjoying the tutorials. Hard to say what’s going on, could you create a simple CodePen demo?

      Reply ↓
      1. Nick December 6, 2015 at 12:29 pm

         Hi Petr,

         Thanks for the quick feedback, I set up the following fiddle:
         http://jsfiddle.net/0waum873/1/

         Hope this shows a little what I am trying to achieve.
         Thanks again for the tuts and your help.
         Much appreciated 🙂

         Reply ↓
         1. Petr Tichy Post authorDecember 6, 2015 at 1:22 pm

            Hey Nick, I haven’t played with filters much, but this seems to work for me:

            Filter blur with ScrollMagic on CodePen

            All you have to do is to pass the filter to the DOM element in a function.

            And here’s the related CodePen demo.

            Also note that filters are not supported in IE.

            Hope that helps.

            Reply ↓
            1. Nick December 11, 2015 at 6:36 pm

               Hey Petr,

               Worked fantastic, as I answered you, thought it would have auto added that to the comments. Anyway so thanks again.
               And here I am again, if you got time or could help me with something small (or maybe it’s not that small);
               I’m using the section wipes with image backgrounds, I have them set to ‘cover’, but some sections have a vertical overflow, which doesn’t cause any issue, but when that specific section becomes fixed it makes the background image jump, and I can’t figure out the css to avoid this jump,
               I did use background size: 100% instead of cover and positioned it vertically against the top, but the problem with this is that if the image is little smaller in height it either repeats itself or when switched off (no-repeat) it leaves a blank space.

               On another note, I really enjoy this ScrollMagic a lot, but it seems that the really amazing thing behind the wow effect is Greensock, are you planning on any gsap specific tutorials.
               Would be really interested in this.

               Sorry for the long read and thanks again.
               Enjoy your weekend!
               Nick
8. Norman Dubois January 10, 2016 at 3:34 pm

   Hi Petr,

   thanks for this awesome article!
   It was really helpful to do the tutorial and your explanation was very good, as always 🙂
   I found one little mistake in the last animation, where you rotate the tomato.
   You wrote this line of code:

   .to(tomato5, 0.3, {y: "+=2", rotation: "-=45", scale: 0.5, transformOrigin: "bottom left", ease:Bounce.easeOut}, "catch")
   

   But the rotation should be rotation: ‘+=45’ to animate the tomato like in the demo.

   Also ScrollMagic is not working anymore if I pause the tween. So with the new version of ScrollMagic I think you don’t have to pause the Timeline initially. Instead just initialize it like this:

   var scrollAnimation = new TimelineMax();
   

   Thanks Petr for this great tutorial!

   Best regards,
   Norman

   Reply ↓
   1. Petr Tichy Post authorJanuary 14, 2016 at 8:57 am

      Thanks for the correction Norman!

      Reply ↓
      1. Norman Dubois February 1, 2016 at 3:46 pm

         Hi Petr,
         you’re welcome!
         Glad to help you! 🙂

         Reply ↓
9. Fredrik January 14, 2016 at 8:42 am

   Hi Petr,

   Thanks for a great article! Just a small question, is it possible to just “fire” the animation once, or is it always active?

   //Fredrik

   Reply ↓
   1. Petr Tichy Post authorJanuary 14, 2016 at 8:48 am

      Hi Frederik, you can set the scene reverse to false to only play the animation once.

      scene.reverse(false);
      

      Hope that helps and let me know if you have any other ScrollMagic questions.

      Reply ↓
10. Shawn January 30, 2016 at 6:13 pm

    I’m going to openly admit that much of this is over my head. But what’s life without challenge right?

    I added a little GS tweenMax to a few elements for fun and it went pretty smoothly.

    Then, I wanted to extend my knowledge to see if I could attach a scroll trigger event that would initialize a tween and stumbled across this article.

    I’m trying to add the information in this tutorial to a Bootstrap setup but not getting the results I was hoping for.

    I’m not looking for anyone to do the work for me necessarily, but any clues to my missteps would be greatly appreciated.

    I’ve got a test page going here that I’ll leave up for a few days.

    Many thanks in advance for the feedback and very much appreciate the tutorial.

    http://www.shawnkelshaw.com/test.html

    Reply ↓
    1. Petr Tichy Post authorJanuary 30, 2016 at 11:54 pm

       Hi Shawn, thanks for the comment and for being honest about the challenge. With a little practice things become easier.

       Your test page has a JS error: Uncaught ReferenceError: $curtain is not defined. $curtain is a variable that I’ve setup for my demo, you might need to include in your code or remove that tween from the timeline.

       Can you be more specific about what is over your head? Is that ScrollMagic API or GSAP? Or the mix?

       Happy to answer your questions.

       Reply ↓
       1. Shawn January 31, 2016 at 5:25 pm

          Thanks Petr. I really appreciate the reply. I took a look at the $curtain issue you cited and noticed I did indeed have some missing information. Sometimes a good night’s sleep can help. I was also missing some div ids and some styles. I’m taking the “reverse engineering” approach to all this and therefore I’m literally plagiarizing your code from the demo page; I hope that’s ok.

          In any event, I think I’ve got something going now. The first animation is now working on pageload as expected as well as the $curtain effect on scene 2. If you have a moment, take a look (http://www.shawnkelshaw.com/test.html). I think I’ll try to start tweaking some of this now… Again, many thanks for the tutorial, the reply and the encouragement.

          P.s. I did find some other tutorials on Skollr.js and I’m thinking that approach is more my speed/knowledge. I may give some of that a try here soon.

          Reply ↓
          1. Petr Tichy Post authorFebruary 1, 2016 at 4:19 am

             Hi Shawn, the reverse engineering is absolutely fine, that’s how I like to learn too. Skrollr might be a better option if you just starting out.

             Reply ↓
11. Jason March 11, 2016 at 6:38 pm

    Been playing around with magic for a little and its great, but how can you start at first scroll?

    I have an elements that is within the viewport when page loading, they will fly up or down when scrolled. The location changes based on user settings, so the elements need to start in the default location. The ‘onEnter’ doesn’t work because when page load the elements have already left their starting position… The only thing I can think of is to make an invisible trigger and place it halfway down the page browser height, but seems a little cumbersome to do it this way.

    Is there another way to go about this or a setting im missing?

    Reply ↓
    1. Petr Tichy Post authorMarch 12, 2016 at 1:50 am

       Hi Jason, have you tried to place invisible trigger to the top of the screen or use the body as the trigger element? Then you could use the triggerHook: 'onLeave' to trigger your animations straight on the first scroll.

       Hope that helps.

       Reply ↓
       1. Jason March 13, 2016 at 1:43 pm

          Thanks, I didnt think of that way. I ended up having something a little similar, having an invisible div at 50% top then offset it by 2 pixels… Seems both ways would do the job.

          Just was wondering if I was missing a command, I was coming from skrollr and it has a data-start command that does this. But after using both I definitely like the power of scroll magic better!

          Reply ↓
          1. Petr Tichy Post authorMarch 15, 2016 at 1:52 am

             Nice one Jason. There is always more ways how to do the same thing. Thanks for sharing your approach, I am sure it will help others.

             Reply ↓
12. Sebastien May 1, 2016 at 4:26 pm

    I love this, I haven’t figured out how to work get it to work with the latest version of the scrollMagic, yet, but that’s a minor detail.

    I do have a question though: I have a page setup that has “blocks” on it, as each block enters, it plays the animation, great. However, the number of blocks that a page may have is a variable that can change and they all use the same “animation”, is there any way to detect if a DOM structure is in view with a particular class instead of targeting the element by an identifier?

    Reply ↓
    1. Petr Tichy Post authorMay 4, 2016 at 3:44 pm

       Hi Sebastien, thanks for checking it out. Yes, you can create an array of triggers (blocks) based on a class and then create a scene for all of them inside of each loop, but they still need a unique ID, otherwise the first would trigger animations on all the elements with the same class.

       I will be covering this and more advanced ScrollMagic animations in the upcoming ScrollMagic Workshop.

       Reply ↓
       1. sebastien May 4, 2016 at 7:44 pm

          Thanks for the reply. I’m not too great with JS, but I figured out if I just put it in a loop using each function, and target “this” instead, it actually will treat each one as a separate element. I don’t know if this is ideal, but it’s smooth and works across all browsers modern browsers.

          See code below:

          var controller = new ScrollMagic();
          $( ".ani2" ).each(function( index ) {
              console.log( index + ": " + $( this ).text() );
              var moduleanimation = new TimelineMax();
              moduleanimation.staggerFrom( $(this).find('*') , 0.5, { delay: 0.3, opacity:0, ease:Power4.easeOut}, 0.01)
          
              var scene = new ScrollScene({triggerElement: this, triggerHook: 'onEnter', offset: 150})
              .addTo(controller)
              .setTween(moduleanimation);
          
          });
          

          Reply ↓
          1. Petr Tichy Post authorMay 9, 2016 at 11:54 am

             Thanks for sharing your code Sebastien, great to see you figured it out. Cheers

             Reply ↓
             1. ishwar July 11, 2016 at 12:00 pm

                hi Sir
                can you give a demo on svg path fill on scrolling,
                https://serioverify.com/
                like this site
13. Elvis July 29, 2016 at 7:16 pm

    Thanks for the post Petr, I’m using a Pinned container to achieve the horizontal slides effects.
    http://scrollmagic.io/examples/advanced/section_slides_manual.html
    But seems like using the trigger for animation within each section won’t work anymore, since there’s virtually no vertical movement. Do you have any workaround on this. Thanks a lot

    Reply ↓
14. Jas October 5, 2016 at 8:32 pm

    Many thanks in advance for the response and very much appreciate the tutorial. I learned allot to use with my site http://www.martelelectronics.com/

    Reply ↓

This site uses Akismet to reduce spam. Learn how your comment data is processed.