Движение объекта по svg path при скролле

#jquery #svg

Есть такой код:



$(window).on('load resize', function() {
    initContainer();
});

$(window).scroll(function(){
    setMotionPath();
});

function initContainer() {
    var element = $('.svg');
    var motionPath = MorphSVGPlugin.pathDataToBezier("#way").reverse();
    TweenLite.set("#circle", { transformOrigin: "50% 50%" });    

    setMotionPath();    
};

function setMotionPath() {
    var element = $('.svg');
    var motionPath = MorphSVGPlugin.pathDataToBezier("#way").reverse();

     TweenLite.to("#circle", 0, {
            x: motionPath["x"],
            y: motionPath["y"]
        });
};
#circle {
  transform-origin: 0px 0px 0px;
}

html,
body {
  height: 200%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  width: 100%;
}











CodePen

Вопрос: Как можно застваить круг двигаться по пути path плавно при скролле (желательно
с использованием TweenMax)?

P.S: Путь path может быть какой угодно, прямая выбрана для примера, а так он может
быть и такой:



 

    

Ответы

Ответ 1

Вот обновленный вариант ответа. Это именно то что вы хотели.

Попытаюсь примерно объяснить что и как работает.

motionPath - это массив в котором содержится координаты линии, но в нем не по пиксельно
есть все координаты. А линия разделяется на куски, и по каждому куску выбирается координат(центр).
Когда вы методом TweenLite.to задаете одну пару координат то анимация доходит до него
и останавливается. Но если попытаться так при скролле каждый раз дать новые координаты
то анимация не будет плавной потому что при скролле не закончив первую часть пути круг
уже получает новые координаты и идет по ним (выходя из линии).

Есть второй вариант. Даем сразу массив координат в метод TweenLite.to и в переменной
сохраним идентификатор анимации tween = TweenLite.to.........
После этого мы уже можем манипулировать с анимацией (к примеру сделать паузу).
И еще один важным момент, tween уже имеет метод progress(), и его значение может
быть от 0 до единицы. И если мы зададим промежуточный прогресс, то анимация возвратиться
к нему.

Вот так и делаем, задаем прогресс при каждом скролле, и с разу же делаем паузу анимации.

Вот и наш ожидаемый результат.



$(window).on('load resize', function() {
    initContainer();
});

$(window).scroll(function(){
    setMotionPath();
});

function initContainer() {
    var element = $('.svg');
    var motionPath = MorphSVGPlugin.pathDataToBezier("#way",{align:"#circle"}).reverse();
    TweenLite.set("#circle", {xPercent:-50, yPercent:-50});		
    setMotionPath();    
};

function setMotionPath() {
    var element = $('.svg');
    var way = $('#way');
    var motionPath = MorphSVGPlugin.pathDataToBezier("#way",{align:"#circle"}).reverse();
    var progress_val = $(window).scrollTop()/5000;
    tween = TweenLite.to("#circle", 3, {bezier:{values:motionPath, type:"cubic"}});
    tween.progress( progress_val ).pause();
};
#circle {
  transform-origin: 0px 0px 0px;
}

html,
body {
  height: 400%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  position: fixed;
  width: 100%;
}









Для прямой линии.

Здесь не нужен reverse получаемых координат. Этот плагин имеет большое количество
опций. Все это уже можете посмотреть сами.



$(window).on('load resize', function() {
    initContainer();
});

$(window).scroll(function(){
    setMotionPath();
});

function initContainer() {
    var element = $('.svg');
    var motionPath = MorphSVGPlugin.pathDataToBezier("#way",{align:"#circle"}).reverse();
    TweenLite.set("#circle", {xPercent:-50, yPercent:-50});		
    setMotionPath();    
};

function setMotionPath() {
    var element = $('.svg');
    var way = $('#way');
    var motionPath = MorphSVGPlugin.pathDataToBezier("#way",{align:"#circle"});
    var progress_val = $(window).scrollTop()/1000;
    tween = TweenLite.to("#circle", 3, {bezier:{values:motionPath, type:"cubic"}});
    tween.progress( progress_val ).pause();
};
#circle {
  transform-origin: 0px 0px 0px;
}

html,
body {
  height: 400%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  position: fixed;
  width: 100%;
}