Created
February 6, 2018 07:30
-
-
Save ahgood/8431fb9b4b84abb8b0ea9d6b3886adf8 to your computer and use it in GitHub Desktop.
GSAP Bezier Curve Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>simple Bezier</title> | |
| <style> | |
| #a { | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="jump">Jump</button> | |
| <div class="wrapper" style="margin-top: 100px;"> | |
| <div id="a">A</div> | |
| </div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script> | |
| // Bezier curve tool: http://www.useragentman.com/tests/textpath/bezier-curve-construction-set.html | |
| function convert(options){ | |
| options = options.replace('M', '').replace('C', ',').split(',').map(function(el){ | |
| return el.trim(); | |
| }); | |
| return [ | |
| {x: options[0], y: options[1]}, | |
| {x: options[2], y: options[3]}, | |
| {x: options[4], y: options[5]}, | |
| {x: options[6], y: options[7]} | |
| ]; | |
| } | |
| TweenLite.set("#a", {x:10, y: 180}); | |
| var tl = new TimelineMax(); | |
| jQuery("#jump").on('click', function() { | |
| tl.to("#a", 0.5, {bezier:{ type: "cubic", values: convert('M 10, 180 C 10, 90, 130, 90, 130, 180'), autoRotate: false }}); | |
| tl.to("#a", 0.5, {bezier:{ type: "cubic", values: convert('M 135, 170 C 54, 177, 53, 69, 134, 74'), autoRotate: false }}); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment