Jump to content
Search Community

Bezier curve on scroll

Eugene Rayner test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...