technob
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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.
-
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:
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 controllervar controller = new ScrollMagic.Controller();// Create tweenvar 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 scenevar 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 /////
TweenMax noob needs help with awesome site.
in GSAP
Posted
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/ )
Thank you all in advance...