Jump to content
GreenSock

ddesilva

Help! Is it possible to draw the path of a TimelineMax that has multiple bezier curves?

By ddesilva, in GSAP. Views: 2,680

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

Posted

Hi, I urgently need a way to draw say dots along an entire path of a TimelineMax. The path does not need to animate. It just needs to be drawn initially. Can anyone point me in the right direction? ANy help appreciated.

 

Sample timeline:

 

 //create timeline
            self.llnTimeline = new TimelineMax({
                delay: 1,
                smoothChildTiming: true,
                timeResolution: 0,
                onUpdate: function() {
               
                }
            });
            self.llnTimeline.seek(0);

 

self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, {
                left: 359,
                top: 998,
                ease: Linear.easeNone
            }), 0);
 
            // 1
            self.llnTimeline.add(TweenMax.to(self.llnPlane, 12, {
                ease: Linear.easeNone,
                css: {
                    bezier: {
                        autoRotate: true,
                        type: "thru",
                        values: [{
                            left: 338,
                            top: 1099
                        }, {
                            left: 257,
                            top: 1114
                        }, {
                            left: 47,
                            top: 945
                        }, ]
                    }
                }
            }), 12);
 
            // 2
            self.llnTimeline.add(TweenMax.to(self.llnPlane, 22, {
                ease: Linear.easeIn,
                css: {
                    bezier: {
                        autoRotate: true,
                        type: "thru",
                        values: [{
                            left: 27,
                            top: 836
                        }, {
                            left: 304,
                            top: -573
                        }, {
                            left: 379,
                            top: -1045
                        }, ]
                    }
                }
            }), 20);
Link to comment
Share on other sites
Posted

I'm not quite sure what you mean by "along an entire path of a TimelineMax", but maybe this will give you some ideas:

http://codepen.io/GreenSock/pen/ABkdL

 

If not, please describe in a little more detail what you're looking for. 

Link to comment
Share on other sites
  • Author
Posted

That's somewhat what I want.. But instead of just going through a TweenMax I need it to go through and entire Timelines Tweens.. I guess I can iterate over the tweens within the timeline and draw points similar to the above example. Thing is I don't really want to add kinect.js to the app. The actual scale of the area I need to draw is quite large as well.. it's an entire flight plan.. see imgur.com/UFak3Go

Link to comment
Share on other sites
Posted

Why would you need to add kinetic.js? I'm confused - that link I sent you only uses DOM elements - no KineticJS. 

 

You could use a canvas library (or just do it raw) or use DOM elements as shown in the codepen above. 

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account