TweenMax noob needs help with awesome site.

[technob]

Hey, I'm trying to make a change to a tween max script but I'm a bit out of my depth.

 

I've got a cool road script going on but the car does not flow very naturally.

 

Here is my site.

http://technobuffs.co.uk/dev/tpz/  (scroll down and you will see the timeline road)

 

The car moves in connection with the scroll but if you compare it to:

http://rit-team.ru/

Here you can see the car moves in connection with the scroll too but it is not directly tied, it accelerates, decelerates and has a maximum speed, even if the user scrolls quickly.

 

My code is below.

 

What sort of changes/additions do i need to be making in order enhance the way the car drives.

 

Many thanks for any help.

 

    ///// Car animate - start /////

    var carpath = {

        road1 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            type: "cubic",

            values: [{x:921, y:0}, {x:921, y:0}, {x:921, y:458.1}, {x:921, y:458.1}, {x:921, y:509.8}, {x:879.1, y:551.6}, {x:827.5, y:551.6}, {x:827.5, y:551.6}, {x:731.7, y:551.6}, {x:731.7, y:551.6}]

        },

        point1 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            type: "cubic",

            values: [{x:731.7, y:551.7}, {x:731.7, y:551.7}, {x:730.7, y:551.7}, {x:730.7, y:551.7}]

        },

        road2 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            type: "cubic",

            values: [{x:730.7, y:551.7}, {x:730.7, y:551.7}, {x:427, y:551.7}, {x:427, y:551.7}, {x:376.9, y:551.7}, {x:336.3, y:592.3000000000001}, {x:336.3, y:642.4000000000001}, {x:336.3, y:642.4000000000001}, {x:336.3, y:797}, {x:336.3, y:797}]

        },

        point2 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            type: "cubic",

            values: [{x:336.3, y:797}, {x:336.3, y:797}, {x:336.3, y:798}, {x:336.3, y:798}]

        },

        road3 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            values: [{x:336.3, y:798}, {x:336.3, y:1143}]

        },

        point3 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            type: "cubic",

            values: [{x:336.3, y:1143}, {x:336.3, y:1143}, {x:336.3, y:1144}, {x:336.3, y:1144}]

        },

        road4 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            type: "cubic",

            values: [{x:336.3, y:1144}, {x:336.3, y:1144}, {x:336.3, y:1223.3}, {x:336.3, y:1223.3}, {x:336.3, y:1273.8999999999999}, {x:377.3, y:1315}, {x:428, y:1315}, {x:428, y:1315}, {x:594, y:1315}, {x:594, y:1315}, {x:646.5, y:1315}, {x:689, y:1272.5}, {x:689, y:1220}, {x:689, y:1194.9}, {x:699.2, y:1172.1}, {x:715.7, y:1155.7}, {x:732.2, y:1139.2}, {x:754.9000000000001, y:1129}, {x:780, y:1129}, {x:806.5, y:1129}, {x:830.5, y:1139.7}, {x:847.9, y:1157.1}, {x:865.3, y:1174.5}, {x:876, y:1198.5}, {x:876, y:1225}, {x:876, y:1225}, {x:876, y:1253}, {x:876, y:1253}]

        },

        point4 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            type: "cubic",

            values: [{x:876, y:1253}, {x:876, y:1253}, {x:876, y:1254}, {x:876, y:1254}]

        },

        road5 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            values: [{x:876, y:1254}, {x:876, y:1731.7}]

        },

        point5 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            type: "cubic",

            values: [{x:876, y:1731.8}, {x:876, y:1731.8}, {x:876, y:1732.7}, {x:876, y:1732.7}]

        },

        road6 : {

            curviness: 0,

            autoRotate: true,

            force3D: true,

            type: "cubic",

            values: [{x:876, y:1732.7}, {x:876, y:1732.7}, {x:876, y:1867.2}, {x:876, y:1867.2}, {x:876, y:1917.9}, {x:834.9, y:1959}, {x:784.2, y:1959}, {x:784.2, y:1959}, {x:657.5, y:1959}, {x:657.5, y:1959}, {x:609.2, y:1959}, {x:570, y:1998.2}, {x:570, y:2046.5}, {x:570, y:2046.5}, {x:570, y:2577}, {x:570, y:2577}]

        }

    };

    // Init controller

    var controller = new ScrollMagic.Controller();

 

    // Create tween

    var tween = new TimelineMax()

        

        .add(TweenMax.to($(".car"), 1.2, {css:{bezier:carpath.road1,display: "block"}, ease:Power0.easeNone}))

        .add(TweenMax.to($(".car"), .5, {css:{bezier:carpath.point1}, ease:Power0.easeNone, onUpdate:popoverShow, onComplete:popoverHide, onReverseComplete:popoverHide}))

        .add(TweenMax.to($(".car"), 1.2, {css:{bezier:carpath.road2}, ease:Power0.easeNone}))

        .add(TweenMax.to($(".car"), .5, {css:{bezier:carpath.point2}, ease:Power0.easeNone}))

        .add(TweenMax.to($(".car"), 1.2, {css:{bezier:carpath.road3}, ease:Power0.easeNone}))

        .add(TweenMax.to($(".car"), .5, {css:{bezier:carpath.point3}, ease:Power0.easeNone}))

        .add(TweenMax.to($(".car"), 1.2, {css:{bezier:carpath.road4}, ease:Power0.easeNone}))

        .add(TweenMax.to($(".car"), .5, {css:{bezier:carpath.point4}, ease:Power0.easeNone}))

        .add(TweenMax.to($(".car"), 1.2, {css:{bezier:carpath.road5}, ease:Power0.easeNone}))

        .add(TweenMax.to($(".car"), .5, {css:{bezier:carpath.point5}, ease:Power0.easeNone}))

        .add(TweenMax.to($(".car"), 1.2, {css:{bezier:carpath.road6, display: "none"}, ease:Power0.easeNone}));

        

    // Build scene

    var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 2077})

        .setTween(tween)

        .addTo(controller);

        //tween.reverse();

 

    var lastScrollTop = 0;

    

    function popoverShow (){

        $(".popover1").css("display", "block");

    };

    function popoverHide (){

        $(".popover1").css("display", "none");

    };

    ///// Car animate - end /////

See the Pen by dev (@dev) on CodePen

[Diaco]

Hi technob 

 

pls make a Codepen Demo for your questions : How to Create a CodePen Demo

 

i don't think this's a GSAP related question !... We have to keep our support focused on GSAP api .

 

anyway , if i understood correctly , you need to add tweenChanges:true to your scene like this :

var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 2077, tweenChanges: true });

[technob]

You're a diamond!

 

Thank you so much.

 

Sorry if this posted in the wrong place. Where should I be asking this question, as I imagine I will have some follow up queries to tweak the script further.

 

I'll also get a CodePen Demo created after i've played some more with the settings.

[Diaco]

if you have any question about GSAP API please feel free to ask here and be sure we'll be delighted to help .

 

but about ScrollMagic , i don't know !...

[technob]

We are using a combination of TweenMax and Scroll Magic to Achieve the car moving on the Road effect

Here is the fiddle I've created, if a code pen is different to this in someway I can create one of these also, please let me know.

Car movement fiddle

If you scroll down the road and then scroll up just a little bit, you will notice that the car continues its journey down the road but in reverse. This is because the orientation of the car is linked to the last scroll direction of the mouse. We would like to make the following function to improve the way the car drives on the website. I’ve used Psudo Code as I think the logic I have in mind is correct I just don’t know the right commands/functions/syntax. Of course if anyone has a more elegant suggestion I’m all ears.

(See how the car interacts when changing direction on http://rit-team.ru/ )

Var CarDirection = “S” - Vehicle direction is set to south
Upon Mouse Scroll()
{
VehicleYPosition = Get Current Object Position() // This is the current  location of the car on the page. even if it is mid tween.
ScrollYPosition = Get Current Scroll Position() // This tells us where the scroll is currently on the page. I know this relates to scroll magic but if you can advise on this too it would be really appreciated.

If MouseScroll = Up AND CarDirection = “S” AND VehicleYPosition + 20 < ScrollYPosition{
    Stop Current Tween ()
    RunFigure8 Tween (CarDirection) // this would consist of using the car’s current position and direction to drive in a figure 8 motion to turn the car around (see http://rit-team.ru/)
    CarDirection = “N” // Change the orientation of the car
    RunRegularTweenFunction()   // The car will then continue driving to the correct scroll location 
}

If MouseScroll = Down AND CarDirection = “N” AND VehicleYPosition - 20 > ScrollYPosition{
    Stop Current Tween ()
    RunFigure8 Tween (CarDirection)
    CarDirection = “S”
    RunRegularTweenFunction()   
}

 
Thank you all in advance...