Bezier curve on scroll

[Eugene Rayner]

Hello!

 

I've been looking into creating an effect that I see a lot of modern websites using. Im not sure if im meant to be using scrollmagic or not but it seems like quite a good library to plugin to gsap.

 

Here's an example of the effect that I am trying to create

http://lamoulade.com/#!/home

The website above displays items on the webpage while you scroll. I am looking at creating something similar.

 

I thought the best place to start was to create a bezier curve, and have it only animate along the curve while I scroll - the only problem is, I have NO idea where to start.

 

Should I be looking at ScrollMagic's 'pinning' of objects and have them set to containers? Not sure.

 

Thanks in advance to anyone that posts any information on this topic.

 

Cheers!

 

See the Pen ZyVJWj by erayner (@erayner) on CodePen

[Eugene Rayner]

Answered my own question  

 

If you're looking at doing something similar to me then i suggest you follow something similar below:

var controller = new ScrollMagic.Controller();
    var creatureMoves = TweenMax.to(document.getElementById("creature"), 5, {
        bezier: {
            type: "cubic",
            values: [{
                x: 100,
                y: 250
            }, {
                x: 150,
                y: 100
            }, {
                x: 300,
                y: 500
            }, {
                x: 500,
                y: 400
            }],
            autoRotate: ["x", "y", "rotation", 0, true]
        },
        ease: Power1.easeInOut
    });

    // container pin
    var startpin = new ScrollMagic.Scene({
            duration: 2000
        })
        .setPin("section#start")
        .addTo(controller);

    new ScrollMagic.Scene({
            offset: 20,
            duration: 180
        })
        .setTween(creatureMoves)
        .addTo(controller);

 

 

Essentially, we are setting the start section of a container to 100vh. Then we tell scrollmagic to pin that start container to the top of the screen and don't move for a set duration. Then we create variables for greensock's tweenmax animations. Finally we grab the variables and setTweens to scrollmagic scenes.

 

Hope this helps anyone in similar situations.

Cheers!