Jump to content


move an object inside canvas

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 have created Bezier curve using Canvas and added a div (square box) to it. Now when I am trying to move the div along Beizer curve the CO-Ords its considering are wrt to the div outside of it but not the Canvas element. So its ending up in a different curve compared to the actual curve drawn on the Canvas.


Is there any example of moving objects drawn using Canvas?


Starting point { x: 0, y: 0 }
Control point 1 { x: 1, y: 50 }
Control Point 2 { x: 200, y: 400 }
End point { x: 400, y: 50 }


var playBtn = document.getElementById("playBtn");
        playBtn.onclick = function () {
            if (document.getElementById("box") != null) {
                var tween1 = TweenMax.to(document.getElementById("box"), 5, {
                    bezier: { type:"cubic", values: [{ x: 0, y: 0 }, { x: 1, y: 50 }, { x: 200, y: 400 }, { x: 400, y: 50 }], autoRotate: false },
                    ease: Power1.easeInOut

Link to comment
Share on other sites

My guess is this could probably be fixed with some CSS positioning so that the #box coordinates are already lined up with the canvas, but I don't know how your files are setup.


Could you post a simple demo of this on http://codepen.io, http://jsfiddle.net or http://jsbin.com/ so we can see where the problem is and come up with a good solution for you?

Link to comment
Share on other sites

Problem is with position of div that's supposed to move. Sorted it by placing it correctly.


See the Pen kvpax by pannamraju (@pannamraju) on CodePen


But when the page loads the animation starts automatically. Am I missing any setting so it will start only after clicking play button?

Link to comment
Share on other sites

Ah glad you sorted out the div positioning then.


All timelines will start playing by default, but you can tell them to start paused like this:

var t1 = new TimelineLite({ paused:true });
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.