Begin AnimateMotion on SVG

[conorlyons]

So I have made a SVG which I will set to begin on the ScrollMagic trigger. I have attempted to add the Begin="indefinite" within the SVG AnimateMotion but do not know how to trigger this using ScrollMagic?

Can anyone help with what I will need to add to the trigger?

I will be using this svg: https://codepen.io/conor-lyons/pen/aPVEvR (Yes, I know I haven't added the ScrollMagic files to the pen. This is an example of the svg)

[nitrokevin]

I have done something similar with an svg on this site (scroll to the mission timeline section) http://projector.modalitysystems.com

Here's my code for the scrollmagic part if that helps `$(function () { // wait for document ready

  var width = window.innerWidth,
height = window.innerHeight;
console.log( width + ' : ' + height );

var flightpath = {
        entry : {
            curviness: 1.5,
            autoRotate: 10,
            values: [
                {x: 0,  y: 0},
                    {x: 591.8, y: -30.8},
                    {x: 736.4, y: 70},

                ]
        },

    };
            // init controller
    var controller = new ScrollMagic.Controller();

    if (width >= 1000) {

    // create tween
    var shuttleflight = new TimelineMax()
        .add(TweenMax.to($("#shuttlegroup"), 1.2, {css:{bezier:flightpath.entry}, ease:Power1.easeInOut}))
            .add(TweenMax.fromTo("#status2", .1, {autoAlpha:0, rotation: 0, ease: Power1.easeInOut}, {delay: 0.2,  autoAlpha:1,   ease: Power1.easeInOut}), 0)
            .add(TweenMax.fromTo("#status3", .1, {autoAlpha:0, rotation: 0, ease: Power1.easeInOut}, {delay: 0.4,  autoAlpha:1,   ease: Power1.easeInOut}), 0)
                .add(TweenMax.fromTo("#status4", .1, {autoAlpha:0, rotation: 0, ease: Power1.easeInOut}, {delay: 0.6,  autoAlpha:1,   ease: Power1.easeInOut}), 0)
                .add(TweenMax.fromTo("#status5", .1, {autoAlpha:0, rotation: 0, ease: Power1.easeInOut}, {delay: 0.8,  autoAlpha:1,   ease: Power1.easeInOut}), 0)

        .add(TweenMax.fromTo("#rightbooster", .6, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.2, y:'600', autoAlpha:0, rotation: 60,  ease: Power1.easeInOut}), 0)
                .add(TweenMax.fromTo("#leftbooster", .6, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.2, y:'-600', autoAlpha:0, rotation: -60,  ease: Power1.easeInOut}), 0)
                    .add(TweenMax.fromTo("#fueltank", .6, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.3, y:'600', autoAlpha:0,  rotation: 60,  ease: Power1.easeInOut}),
                     0)
                        .add(TweenMax.fromTo("#shuttle_2_", .1, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.4,  autoAlpha:0,   ease: Power1.easeInOut}),
                     0)
                        .add(TweenMax.fromTo("#shuttlebody", .6, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.5, y:'-200', autoAlpha:0,   ease: Power1.easeInOut}),
                     0)
                        .add(TweenMax.fromTo("#timeline-capsule", .3, {  rotation: 0, ease: Power1.easeInOut}, {delay: 0.74, rotation: -140,    ease: Power1.easeInOut}),
                     0)

    // build scene

    var scene = new ScrollMagic.Scene({triggerElement: "#timeline-pin-trigger",triggerHook: 0, duration: 3400, offset: 0})
                    .setPin(".timeline-content")
                    .setTween(shuttleflight)
                    .addTo(controller);

} else if (width < 1000) {

    // create tween
    var shuttleflight = new TimelineMax()
        .add(TweenMax.to($("#shuttlegroup"), 1.2, {css:{bezier:flightpath.entry}, ease:Power1.easeInOut}))
            .add(TweenMax.fromTo("#status2", .1, {autoAlpha:0, rotation: 0, ease: Power1.easeInOut}, {delay: 0.2,  autoAlpha:1,   ease: Power1.easeInOut}), 0)
            .add(TweenMax.fromTo("#status3", .1, {autoAlpha:0, rotation: 0, ease: Power1.easeInOut}, {delay: 0.4,  autoAlpha:1,   ease: Power1.easeInOut}), 0)
                .add(TweenMax.fromTo("#status4", .1, {autoAlpha:0, rotation: 0, ease: Power1.easeInOut}, {delay: 0.6,  autoAlpha:1,   ease: Power1.easeInOut}), 0)
                .add(TweenMax.fromTo("#status5", .1, {autoAlpha:0, rotation: 0, ease: Power1.easeInOut}, {delay: 0.8,  autoAlpha:1,   ease: Power1.easeInOut}), 0)

        .add(TweenMax.fromTo("#rightbooster", .6, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.2, y:'600', autoAlpha:0, rotation: 60,  ease: Power1.easeInOut}), 0)
                .add(TweenMax.fromTo("#leftbooster", .6, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.2, y:'-600', autoAlpha:0, rotation: -60,  ease: Power1.easeInOut}), 0)
                    .add(TweenMax.fromTo("#fueltank", .6, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.3, y:'600', autoAlpha:0,  rotation: 60,  ease: Power1.easeInOut}),
                     0)
                        .add(TweenMax.fromTo("#shuttle_2_", .1, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.4,  autoAlpha:0,   ease: Power1.easeInOut}),
                     0)
                        .add(TweenMax.fromTo("#shuttlebody", .6, {y:'0', autoAlpha:1, rotation: 0, ease: Power1.easeInOut}, {delay: 0.5, y:'-200', autoAlpha:0,   ease: Power1.easeInOut}),
                     0)
                        .add(TweenMax.fromTo("#timeline-capsule", .3, {  rotation: 0, ease: Power1.easeInOut}, {delay: 0.74, rotation: -140,    ease: Power1.easeInOut}),
                     0)

    // build scene
    var scene = new ScrollMagic.Scene({triggerElement: "#timeline-pin-trigger",triggerHook: 0, duration: 3500, offset: 0})
                    .setPin(".timeline-content")
                    .setTween(shuttleflight)
                    .addTo(controller); 
    }   
});`

[conorlyons]

Isn't this replacing the use of a SVG Animate Motion tho? and Instead using a tween?

[nitrokevin]

yes your right I miss read your message! sorry!

[conorlyons]

yes your right I miss read your message! sorry!

Thanks for your help tho. I can see using your code how you have made the svg follow the path.