Created
November 14, 2017 05:09
-
-
Save beemyfriend/8c55b96421988d8b44f162c0a1286721 to your computer and use it in GitHub Desktop.
Playing WITH GREENSOCK!!!!!!
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
| <head> | |
| <style> | |
| #hello div { | |
| float: left | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id = 'hello'></div> | |
| <svg width='500', height='500'> | |
| <g > | |
| <text class='text_info', x='250', y='200', fill='black', font-size='25'>This is the begining</text> | |
| <text class='text_info', x='250', y='230', fill='black', font-size='25'>of something awesome</text> | |
| <rect id='testRect', x='100', y='100', width='100', height='100'/> | |
| <circle id='testCirc', cx='400', cy='400', r='50', opacity='0'/> | |
| <circle id='firefly1', cx = '250', cy='250', r = '10', fill='yellow', stroke='grey'/> | |
| <circle id='firefly2', cx = '250', cy='250', r = '10', fill='yellow', stroke='grey'/> | |
| <circle id='firefly3', cx = '250', cy='250', r = '10', fill='yellow', stroke='grey'/> | |
| <line id='testLine', class='rotCirc' x1='200', x2='400', y1='200', y2='400', stroke='black', stroke-width='2'/> | |
| <circle id='blueCirc', class='rotCirc', cx='400', cy='200', r='10', fill='blue'/> | |
| <circle id='pinkCirc', class='rotCirc', cx='200', cy='400', r='10', fill='pink'/> | |
| </g> | |
| </svg> | |
| </body> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> | |
| <script> | |
| var hello_world = 'hello world'.split('').map(function(x){ | |
| if(x == ' '){ | |
| return ' ' | |
| } else { | |
| return x | |
| } | |
| }) | |
| d3.select('#hello') | |
| .selectAll('div') | |
| .data(hello_world) | |
| .enter().append('div') | |
| .attr('class', 'letter') | |
| .html(function(d){return d}) | |
| var letters = d3.selectAll('.letter').nodes(), | |
| tl = new TimelineMax({repeat: -1}); | |
| tl | |
| .staggerFrom(letters, 3, {ease:Back.easeOut, x:100, cycle:{y:[-100, 100]}, opacity: 0}, .1) | |
| .staggerTo(letters, 3, {cycle: {y: [-100, 100], rotationX: [180, -180]}, rotation: 180}) | |
| testRect = d3.select('#testRect').node(); | |
| testCirc = d3.select('#testCirc').node(); | |
| firefly1 = d3.select('#firefly1').node(); | |
| firefly2 = d3.select('#firefly2').node(); | |
| firefly3 = d3.select('#firefly3').node(); | |
| testLine = d3.select('#testLine').node(); | |
| rotCirc = d3.selectAll('.rotCirc').nodes(); | |
| header = d3.select('#header'); | |
| svg = d3.select('svg') | |
| circle = { | |
| first: { | |
| x: [0, -200], | |
| y: [-200, -200] | |
| }, | |
| second: { | |
| x: [0, 0], | |
| y: [-200, 0] | |
| } | |
| } | |
| ff = { | |
| first: { | |
| begin: 50, | |
| end: -50 | |
| }, | |
| second: { | |
| begin: -50, | |
| end: 50 | |
| } | |
| } | |
| circle_order = 'first'; | |
| circle_object = circle[circle_order]; | |
| ff_object = ff[circle_order]; | |
| function makeTL(x, y, ff_object){ | |
| wtl = new TimelineMax(); | |
| wtl | |
| .staggerFrom('.text_info', 3, {opacity: 0, y: 100}, 1) | |
| ftl = new TimelineMax(); | |
| TweenMax.set(firefly3, { | |
| svgOrigin: '100 100', | |
| rotation: ff_object.begin | |
| }) | |
| // | |
| // TweenMax.set(testLine, { | |
| // svgOrigin: '300 300', | |
| // rotation: 0 | |
| // }) | |
| TweenMax.set(rotCirc, { | |
| svgOrigin: '300 300', | |
| rotation: 0 | |
| }) | |
| ftl | |
| .add('start') | |
| .to(firefly1, 6, { | |
| bezier: { | |
| type: 'thru', | |
| values:[ | |
| {x: 10, y: 30}, | |
| {x: -30, y: 20}, | |
| {x: -40, y: 10}, | |
| {x: 30, y: 20}, | |
| {x: 0, y: 0} | |
| ], | |
| autoRotate: true, | |
| curviness: 0 | |
| }, | |
| ease: Linear.easeNone | |
| }, 'start') | |
| .to(firefly2, 6, { | |
| bezier: { | |
| type: 'soft', | |
| values:[ | |
| {x: 10, y: 30}, | |
| {x: -30, y: 20}, | |
| {x: -40, y: 10}, | |
| {x: 30, y: 20}, | |
| {x: 0, y: 0} | |
| ], | |
| autoRotate: true, | |
| }, | |
| ease: Linear.easeNone | |
| }, 'start') | |
| .to(firefly3, 6, { | |
| rotation: ff_object.end | |
| }, 'start') | |
| // .to(testLine, 6, { | |
| // rotation: 180 | |
| // }, 'start') | |
| .to(rotCirc, 6, { | |
| rotation: 180 | |
| }, 'start') | |
| tl = new TimelineMax(); | |
| // tc = new TimelineLite(); | |
| // header = document.getElementById('header') | |
| i = 0; | |
| // testRect = document.getElementById('testRect' | |
| tl | |
| .add('intro') | |
| .to(testRect, 3, {opacity: 0, y: 200, x: 200, onUpdate: onUpdate}, 'intro') | |
| .to(testCirc, 3, {opacity: 1, x: x[0], y: y[0]}, 'intro') | |
| .add('two') | |
| .to(testRect, 3, {opacity: 1, y: 0, x: 0}, 'two') | |
| .to(testCirc, 3, {opacity: 0, y: y[1], x: x[1], onComplete: function(){ | |
| circle_order == 'first' ? circle_order ='second' : circle_order = 'first'; | |
| circle_object = circle[circle_order] | |
| ff_object = ff[circle_order] | |
| makeTL(circle_object.x, circle_object.y, ff_object ) | |
| console.log('run') | |
| }}, 'two'); | |
| } | |
| makeTL(circle_object.x, circle_object.y, ff_object) | |
| // tl.pause() | |
| // paused = true | |
| // svg.on('click', function(){ | |
| // if(paused){ | |
| // paused = !paused | |
| // tl.play() | |
| // } else if(paused == false){ | |
| // paused = !paused | |
| // tl.pause() | |
| // } else if(paused == null){} | |
| // }) | |
| function onUpdate(){ | |
| header.html(i++) | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment