Jump to content
Search Community

BezierPlugin undefined

un4given 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

I cant seem to get accsess to the BezierPlugin, I get a undefined error.

 

My aim is to draw the line my object moves along using bezierThrough, do you know of any simple tutorials/examples of this?

 

I found a few but they are quite confusing.

Link to comment
Share on other sites

Are you using TweenLite or TweenMax? If you're using TweenLite, don't forget to load the BezierPlugin too (TweenMax has it inside, so you don't need to load it separately if you're using TweenMax). If you're still having trouble, please post your files or a codepen or something that demonstrates what's happening so we can have a peek. I strongly suspect, however, that you just forgot to load the BezierPlugin js file.

 

As far as an example, you might want to check out the Plugin Explorer. Even though it was built for the Flash version originally, the API is identical in JS. http://www.greensock.com/v12/ - scroll down until you see the Plugin Explorer and then click the "EXAMPLE" button next to "bezier" in the list. There's an interactive demo there that writes code down below.

Link to comment
Share on other sites

I'm using TweenMax, I also tried using TweenLite and the plugin.

 

I'm using superScrollorama, the tween itself works if I dont try to get the path using BrezierThrough.

 

The only problem I'm having is with this line:

 

var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);

 

The full JS:

 

$(document).ready(function() {
			var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);

			var controller = $.superscrollorama({
				triggerAtCenter: false,
				playoutAnimations: false
			});
			
			var e1 = $("#foo"), e2 = $("#foo2"), e3 = $("#foo3");		
			
			controller.addTween('#container',
				(new TimelineLite())
					.append([
						TweenMax.staggerTo([e1,e2,e3],50,{css:{bezier:{curviness:1, values:[{x:0, y:0},{x:500, y:0},{x:500, y:100}, {x:0, y:100}], autoRotate:true},ease:Linear.easeNone}},0.5)
				])
				,
				500,
				-300);
		});

 

 

Link to comment
Share on other sites

I got brazierThrough work thanx to your updated file but I'm having some odd results.

 

I have attached my sample file, inside are two canvas paths. One drawn using brazierThrough and one build manually (commented out). The one drawn via brazierThrough doesn't seem to match the tween path.

 

Also the StutterTo Tween seems to have a ease on it, even though I specified Linear.easeNone. You can see the letters getting close towards the end of the Tween.

 

Any ideas?

brazierPath.zip

Link to comment
Share on other sites

The problem was that you were using your coordinates to generate a bezierThrough() which creates a Bezier through each and every point you fed in, and then you were using the same (original, pre-bezierThrough()) points for the tween and telling it to interpret them as cubic data.  

 

If, for example, you feed 16 points to a bezierThrough(), it will spit back cubic data for the Beziers that it plotted through each of those 16 points. Each Bezier segment has 2 anchors and 2 control points, thus you're getting back 64 data points (16 x 4). 

 

When you tell the tween that you're feeding in type:"cubic", it expects you to be sending the data in as anchor, control point, control point, anchor, control point, control point, anchor, etc. 

 

See the problem with your code? Another issue was that you had duplicate points multiple times in a row in your data, so bezierThrough() had a hard time with that (although in the upcoming 1.9.3 release it should handle it fine). In other words, you were telling it to draw a Bezier through {x:300, y:80} and then go through {x:300, y:80}, and then go through {x:300, y:80} (the same point 3 times). 

 

I think you meant to do something more like:

 

$(document).ready(function() {
    var coords = [{x:-100, y:20}, //anchor
                  {x:200,y:20},
                  {x:300,y:20},
                  {x:500,y:20}, //anchor
                  {x:548,y:20},
                  {x:548,y:80},
                  {x:500,y:80}, //anchor
                  {x:300,y:80},
                  {x:300,y:80},
                  {x:300,y:80}, //anchor
                  {x:285,y:80},
                  {x:285,y:100},
                  {x:285,y:200}, //anchor
                  {x:285,y:250},
                  {x:285,y:270},
                  {x:285,y:400}];
   
    var controller = $.superscrollorama({
        triggerAtCenter: false,
        playoutAnimations: false
    });
   
    var e1 = $("#foo"), e2 = $("#foo2"), e3 = $("#foo3"),fields = [e1,e2,e3];       
    TweenLite.set(fields, {x:-100, y:20});
    controller.addTween('#container',
        (new TimelineLite())
            .staggerTo(fields,50,{bezier:{type:"cubic", values:coords, autoRotate:true}, ease:Linear.easeNone}, 0.5),
                500,
            -300);    var canvas = document.getElementById("c"),
    context = canvas.getContext("2d");
   
    context.strokeStyle = '#fa00ff';
    context.lineWidth = 10;
    context.lineCap = 'round';    context.beginPath();
   
    for(var i = 0;i < coords.length-1; i+=3) {
        context.lineTo(coords[i].x, coords[i].y);
        context.bezierCurveTo(coords[i+1].x, coords[i+1].y, coords[i+2].x, coords[i+2].y, coords[i+3].x, coords[i+3].y);
    }
   
    context.stroke();
});

Does that help?

  • Like 1
Link to comment
Share on other sites

I didn't do anything special - the plugin has an algorithm internally that should help compensate for the easing that's inherent in Beziers and the way they plot positions along the path. You can increase the accuracy by changing the "timeResolution" special property (as mentioned in the docs: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html) but the higher you make that number, the more processing is required. Typically the default is very good and you won't notice any speeding up or slowing down along the path. 

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...