GRAY GHOST

BusinessGreen
  • Content count

    41
  • Joined

  • Last visited

Community Reputation

11 Newbie

About GRAY GHOST

  • Rank
    Advanced Member

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Rochester, NY
  1. Bending SVG Paths

    Thanks for the insight and help Mikel. One thing I'd ask is to remove any public pens that showcase this effect using the designs I've posted, but feel free to use different artwork to showcase a similar effect I'm going for. Again, appreciate the help 100%.
  2. Bending SVG Paths

    Image: https://www.dropbox.com/s/r2tgtnenucbz3dt/Screenshot 2017-07-23 14.30.07.png I'm trying to make the image on the left (a staple) morph into the image on right ("S") by bending the path into place vs. the effect I currently get with morphSVG. The effect I currently get is more "blob-like" when the transition happens vs. a smooth and graceful bend that I prefer. Any suggestions to help me get on the right "path?"
  3. HELP - transformOrgin/smoothOrigin problem

    If it's supposed to be rolling on the ground then you should first set the CSS up to position the rectangle on the bottom of the viewport: #ban-roller_wrapper { … bottom: 0; … } Also I believe this approach you are using in the JS is meant for SVG and not a div, but maybe someone else can correct me If I'm mistaken.
  4. Morphing Wind Motion

    I'm attempting to make the blades of grass sway back and forth and was wondering if that's doable. I've tried using MorphSVG, but found the results to be pretty terrible in regards to the motion created even when adjusting shapeIndex values both positive and negative. I don't have a demo ATM just curious on others thoughts based on the image attached. Achieving this life like motion is pretty difficult for me currently so would love to learn a bit more how to achieve this.
  5. Safari Transform Origin & Scaling Blues

    Hey Jack, I found my issue. I was setting transform: scale(0) in CSS when I should be using a different approach. To explain: I was scaling down in my CSS to alleviate the flash of the graphic when the browser initially loads, but I fixed my concern by using this approach: #svg-target { visibility: hidden; } TweenMax.set(svg_target, { scale: 0, transformOrigin: 'bottom center', visibility: 'visible' }); TweenMax.to(svg_target, 1, { scale: 1 });
  6. Safari Transform Origin & Scaling Blues

    I've got this scene where a scale and transform-origin are being used together. On Safari the effect never takes places and I know of a hacky way to fix this, but wondering what a better solution would be? Here is the code I'm discussing. tl.to(worm, 1, { scale: 1, transformOrigin: 'bottom center' });
  7. For some reason Firefox Stable on Mac Yosemite appears to be somewhat choppy when it comes to the orbs floating animation in the pen shared. Any suggestions for improving that sequence or thoughts on why Firefox is reacting the way it is? My setup is very straight forward: var bezier_topleft = [ { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 } ]; tl.to(node, config.duration, { bezier: { type: 'thru', values: config.bezier }, onComplete: function() { fire(); }, ease: Linear.easeInOut });
  8. Control Pause Based on Bézier Coordinates

    @Carl. Appreciate that Carl. Thanks for jumping in, but I think I was finally able to figure it out tinkering with demo code Blake posted in another thread. @Blake Thanks for that example. Let me know what you think of this solution below since you will recognize the code better. This starts at line 301 in the demo. Essentially as the cycle of an orb finishes it's bezier path it fires the wave signal to the brain using the onComplete event handler. Seems to be doing the job. tl.to(node, config.duration, { bezier: { type: 'thru', values: config.bezier }, onComplete: function() { fire(); }, ease: Linear.easeInOut });
  9. I've got a great SVG animation almost ready to share but need some last round tips. My code has been refined plus the integration of pointers Blake gave me in a previous thread, but it seems I'm having difficulty pausing the orbs when they reach the end of their individual bézier paths (i.e. x: 0, y: 0). Any advice? When each brain wave signal fires from the orbs the wave should be firing when x is 0 and y is 0 just to repeat myself if I wasn't clear. Thanks!
  10. Nested Timelines Eventually Sync

    var kpassions = (function() { // ORBS var orb_tr = document.getElementById('orb-tr'), orb_bl = document.getElementById('orb-bl'), orb_tl = document.getElementById('orb-tl'), orb_mr = document.getElementById('orb-mr'), orbs = [orb_tr, orb_bl, orb_tl, orb_mr]; // BRAIN WAVES var bwave_front = document.querySelectorAll('#bwave-front path'), bwave_front_bl = document.querySelectorAll('#bwave-front_bl path'), bwave_cerebellum = document.querySelectorAll('#bwave-cerebellum path'), bwave_cerebellum_tr = document.querySelectorAll('#bwave-cerebellum_tr path'), bwave_vein = document.querySelectorAll('#vein path'); // NODES var nodes = document.querySelectorAll('.node'), vein_node = document.querySelectorAll('.vein-node'); // Configs var scale_start = { scale: 0, transformOrigin: 'center center' } var path_reverse = { rotation: 180, transformOrigin: 'center center' }; var from = { drawSVG: '0' }; var to_default = { drawSVG: '100%', opacity: 0.8 }; var to_reverse = { drawSVG: '0 100%', opacity: 0.8 }; var unfill = { drawSVG: '100% 100%', opacity: 0.2 }; // Setters TweenMax.set(bwave_front, path_reverse); TweenMax.set([orbs, nodes, vein_node], scale_start); // Utility Methods // ============================================= function hideGraphic(selector) { TweenMax.set(selector, { visibility: 'hidden' }); } // Breathing // ============================================= function breatheIn() { var start = "M935.2,891.7C912.8,804,737.9,648.8,726.3,602.8c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7l-1.3,32.9c0,1.5,0.9,2.9,2.3,3.4l9.1-0.9c1.4,0.6,1.5,2.5,0.1,3.2l-10.3,1c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,7.2,109.8,91.2,109.8c0,0,67.2,79.6-45,226.2L935.2,891.7L935.2,891.7z"; var end = "M953.6,891.7c-88.5-223.2-215.7-242.9-227.3-288.9c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7v28.8c0,1.5,0.9,2.9,2.3,3.4l7.8,3.2c1.4,0.6,1.5,2.5,0.1,3.2l-8.6,4.3c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,5.5,106.4,89.5,106.4c0,0,40.6,66.6-45,226.2h377.7L953.6,891.7z"; var speed = 3200, eaze = mina.linear, silhouette = Snap.select('#child'); var outline = silhouette.attr({ d: start }); silhouette.animate({ d: end }, speed, eaze, function() { setTimeout(breatheOut, 1000); }); } function breatheOut() { var start = "M953.6,891.7c-88.5-223.2-215.7-242.9-227.3-288.9c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7v28.8c0,1.5,0.9,2.9,2.3,3.4l7.8,3.2c1.4,0.6,1.5,2.5,0.1,3.2l-8.6,4.3c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,5.5,106.4,89.5,106.4c0,0,40.6,66.6-45,226.2h377.7L953.6,891.7z"; var end = "M935.2,891.7C912.8,804,737.9,648.8,726.3,602.8c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7l-1.3,32.9c0,1.5,0.9,2.9,2.3,3.4l9.1-0.9c1.4,0.6,1.5,2.5,0.1,3.2l-10.3,1c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,7.2,109.8,91.2,109.8c0,0,67.2,79.6-45,226.2L935.2,891.7L935.2,891.7z"; var speed = 3000, eaze = mina.linear, silhouette = Snap.select('#child'); var outline = silhouette.attr({ d: start }); silhouette.animate({ d:end }, speed, eaze, function() { setTimeout(breatheIn, 1000); }); } // Hair Movement // ============================================= function hairUp() { var start = "M481.2,343.7c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3l39.1-61.6c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7C475.9,339.3,478.6,342,481.2,343.7z"; var end = "M484.5,334.9c2.5,1.6,4.8,4.1,7.6,5.2c-1.4,1.3-2.7,1.1-4.5,1.6c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.3,2.6,5.3,2.9c1.1,0.2-0.7,8,0.4,8l39.1-61.6c-14.7,13.9-25,21.9-44.3,27.8c-2.8,0.9-6.1,1.9-6.9,4.7C479.2,330.5,481.9,333.2,484.5,334.9z"; var speed = 1200, eaze = mina.backin, silhouette = Snap.select('#hair'); var outline = silhouette.attr({ d: start }); silhouette.animate({ d:end }, speed, eaze, function() { setTimeout(hairDown, 0); }); } function hairDown() { var start = "M484.5,334.9c2.5,1.6,4.8,4.1,7.6,5.2c-1.4,1.3-2.7,1.1-4.5,1.6c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.3,2.6,5.3,2.9c1.1,0.2-0.7,8,0.4,8l39.1-61.6c-14.7,13.9-25,21.9-44.3,27.8c-2.8,0.9-6.1,1.9-6.9,4.7C479.2,330.5,481.9,333.2,484.5,334.9z"; var end = "M481.2,343.7c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3l39.1-61.6c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7C475.9,339.3,478.6,342,481.2,343.7z"; var speed = 1200, eaze = mina.backout, silhouette = Snap.select('#hair'); var outline = silhouette.attr({ d: start }); silhouette.animate({ d:end }, speed, eaze, function() { setTimeout(hairUp, 0); }); } // Facial Movements // ============================================= function blink() { var tl = new TimelineMax({ repeat: -1, repeatDelay: 3, yoyo: true }); var eye = document.querySelector('.kp #eye'), duration = 0.5; TweenMax.set(eye, { transformOrigin: 'bottom center' }) var blink = { scaleY: 0, ease: Power1.easeIn }; var open = { scaleY: 1, ease: Power1.easeOut }; tl.to(eye, duration, blink) .to(eye, duration, open); return tl; } // Silhouette Orb // ============================================= function orbPulse() { var tl = new TimelineMax(); var orbs = document.querySelectorAll('#pulse circle'), stagger_in = 0.2, stagger_out = stagger_in, duration_in = 1, duration_out = duration_in, orb_array = [orbs[5], orbs[4], orbs[3], orbs[2], orbs[1], orbs[0]]; hideGraphic(orbs); var from = { transformOrigin: 'center center', scale: 0, ease: Cubic.easeIn }; var to = { scale: 1, opacity: 1, visibility: 'visible', ease: Cubic.easeOut }; var fade = { opacity: 0, ease: Ease.easeOut }; tl.staggerFromTo(orb_array, duration_in, from, to, stagger_in) .staggerTo(orb_array, duration_out, fade, stagger_out); tl.timeScale(3); return tl } // Floating Orbs // ============================================= var bezier_topleft = [ { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 } ]; var bezier_bottomleft = [ { x: 0, y: 0 }, { x: 14, y: 12 }, { x: -4, y: -24 }, { x: 25, y: 24 }, { x: 10, y: -10 }, { x: 20, y: 24 }, { x: 10, y: 27 }, { x: 0, y: 0 }, { x: -10, y: 36 }, { x: 20, y: 0 }, { x: -15, y: 36 }, { x: 10, y: -6 }, { x: -15, y: 36 }, { x: 0, y: 0 } ]; var bezier_bottomright = [ { x: 0, y: 0 }, { x: -15, y: 12 }, { x: 14, y: -24 }, { x: -14, y: 24 }, { x: 14, y: -24 }, { x: -14, y: 24 }, { x: 14, y: -24 }, { x: 0, y: 0 } ]; var bezier_topright = [ { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 } ]; function orbFloat(selector, duration, bezier) { var tl = new TimelineMax(); tl.to(selector, duration, { bezier: { type: 'thru', values: bezier }, ease: Linear.easeInOut }); return tl; } // Orb Bubbling // ============================================= function orbBubbleIn(selector, duration) { var tl = new TimelineMax(); var to = { scale: 1, ease: Elastic.easeOut }; tl.to(selector, duration, to); return tl; } function orbBubbleOut(selector, duration) { var tl = new TimelineMax(); var to = { transformOrigin: 'center center', scale: 0, ease: Elastic.easeInOut }; tl.to(selector, duration, to); return tl; } // Pulsing Brain Nodes // ============================================= TweenMax.set([nodes,vein_node], { visibility: 'visible' }); function nodePulseIn(selector, n) { var tl = new TimelineMax(); var duration = 0.5; var pulse_in = { scale: 1, opacity: 1, ease: Power1.easeIn }; tl.to(selector[n], duration, pulse_in); return tl; } function nodePulseOut(selector) { var tl = new TimelineMax(); var duration = 0.5; var pulse_out = { scale: 0, opacity: 0, ease: Power1.easeOut }; tl.to(selector, duration, pulse_out); return tl; } // Idea Data Flow // ============================================= function transmissionTopLeft() { var tl = new TimelineMax({ repeat: -1 }); tl.add(orbBubbleIn(orb_tl, 1), 0) .add(orbFloat(orb_tl, 21, bezier_topleft), 0) .add('transmit') .fromTo(bwave_front, 1, from, to_default, 'transmit') .add('wave') .add(nodePulseIn(nodes, 0), 'wave-=0.25') .add(orbPulse(), 'wave') .add('pulse') .add(nodePulseIn(vein_node, 0), 'pulse-=1') .fromTo(bwave_vein, 1, from, to_reverse, 'pulse') .add('unfill') .add(nodePulseOut(nodes, 0), 'unfill+=0.25') .add(nodePulseOut(vein_node, 0), 'unfill') .add(orbFloat(orb_tl, 21, bezier_topleft), 'unfill+=0.5') .to(bwave_front, 1, unfill, 'unfill') .to(bwave_vein, 1, unfill, 'unfill+=0.25') .add(orbBubbleOut(orb_tl, 1)); return tl; } function transmissionBottomLeft() { var tl = new TimelineMax({ repeat: -1 }); tl.add(orbBubbleIn(orb_bl, 1), 0) .add(orbFloat(orb_bl, 63.975, bezier_bottomleft), 0) .add('transmit') .fromTo(bwave_front_bl, 1, from, to_default, 'transmit') .add('wave') .add(nodePulseIn(nodes, 1), 'wave-=0.25') .add(orbPulse(), 'wave') .add('pulse') .add(nodePulseIn(vein_node, 0), 'pulse-=1') .fromTo(bwave_vein, 1, from, to_reverse, 'pulse') .add('unfill') .add(nodePulseOut(nodes, 1), 'unfill+=0.25') .add(nodePulseOut(vein_node, 0), 'unfill') .add(orbFloat(orb_bl, 63.975, bezier_bottomleft), 'unfill+=0.5') .to(bwave_front_bl, 1, unfill, 'unfill') .to(bwave_vein, 1, unfill, 'unfill+=0.25') .add(orbBubbleOut(orb_bl, 1)); return tl; } function transmissionBottomRight() { var tl = new TimelineMax({ repeat: -1 }); tl.add(orbBubbleIn(orb_mr, 1), 0) .add(orbFloat(orb_mr, 42.21375, bezier_bottomright), 0) .add('transmit') .fromTo(bwave_cerebellum, 1, from, to_default, 'transmit') .add('wave') .add(nodePulseIn(nodes, 2), 'wave-=0.25') .add(orbPulse(), 'wave') .add('pulse') .add(nodePulseIn(vein_node, 0), 'pulse-=1') .fromTo(bwave_vein, 1, from, to_reverse, 'pulse') .add('unfill') .add(nodePulseOut(nodes, 2), 'unfill+=0.25') .add(nodePulseOut(vein_node, 0), 'unfill') .add(orbFloat(orb_mr, 42.21375, bezier_bottomright), 'unfill+=0.5') .to(bwave_cerebellum, 1, unfill, 'unfill') .to(bwave_vein, 1, unfill, 'unfill+=0.25') .add(orbBubbleOut(orb_mr, 1)); return tl; } function transmissionTopRight() { var tl = new TimelineMax({ repeat: -1 }); tl.add(orbBubbleIn(orb_tr, 1), 0) .add(orbFloat(orb_tr, 55, bezier_topright), 0) .add('transmit') .fromTo(bwave_cerebellum_tr, 1, from, to_default, 'transmit') .add('wave') .add(nodePulseIn(nodes, 3), 'wave-=0.25') .add(orbPulse(), 'wave') .add('pulse') .add(nodePulseIn(vein_node, 0), 'pulse-=1') .fromTo(bwave_vein, 1, from, to_reverse, 'pulse') .add('unfill') .add(nodePulseOut(nodes, 3), 'unfill+=0.25') .add(nodePulseOut(vein_node, 0), 'unfill') .add(orbFloat(orb_tr, 55, bezier_topright), 'unfill+=0.5') .to(bwave_cerebellum_tr, 1, unfill, 'unfill') .to(bwave_vein, 1, unfill, 'unfill+=0.25') .add(orbBubbleOut(orb_tr, 1)); return tl; } ////////////////////////////////////////////////////// var laser = document.querySelector("#laser"); var brain = document.querySelector("#brain"); function Orb(config, index) { var node = config.target; var tl = new TimelineMax({ repeat: -1 }); tl.to(node, config.duration, { bezier: { type: 'thru', values: config.bezier }, ease: Linear.easeInOut }); TweenLite.delayedCall(index * 0.25, start); var orb = { tl: tl, node: node, fire: fire }; return orb; function start() { TweenLite.to(node, 1, { scale: 1, ease: Elastic.easeOut }); } function fire(callback) { tl.pause(); var bbox1 = node.getBBox(); var bbox2 = brain.getBBox(); TweenLite.set(laser, { drawSVG: 0, autoAlpha: 1, attr: { x1: bbox1.x + bbox1.width / 2, y1: bbox1.y + bbox1.height / 2, x2: bbox2.x + bbox2.width / 2, y2: bbox2.y + bbox2.height / 2, } }); TweenMax.to(laser, 1, { drawSVG: true, repeat: 1, yoyo: true, repeatDelay: 1, onComplete: function() { tl.play(); callback(); } }); } } var orbConfig = [ { target: orb_tl, duration: 21, bezier: bezier_topleft }, { target: orb_bl, duration: 64, bezier: bezier_bottomleft }, { target: orb_mr, duration: 42, bezier: bezier_bottomright }, { target: orb_tr, duration: 55, bezier: bezier_topright } ]; var orbs = orbConfig.map(Orb); var size = orbs.length; fireLaser(random(4, true)); function fireLaser(delay) { TweenLite.delayedCall(delay, function() { getRandom().fire(function() { fireLaser(random(1, 4, true)); }); }); } function getRandom() { return orbs[random(size - 1)]; } function random(min, max, float) { if (max == null) { max = min; min = 0; } return float ? min + Math.random() * (max - min + 1) : min + Math.floor(Math.random() * (max - min + 1)); } // Master Timeline // ============================================= function timeline() { // http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/TimelineMax var master = new TimelineMax({ smoothChildTiming: true, tweens: [ //transmissionTopLeft(), //transmissionBottomLeft(), //transmissionBottomRight(), //transmissionTopRight() ], stagger: 0.25 }); master.timeScale(6) return master; } return { init: function(){ blink(); breatheIn(); timeline(); } }; })(); kpassions.init();
  11. Nested Timelines Eventually Sync

    Awesome Blake! I'm still getting my head around nested timelines and complex scenes. This example is really on the money now. Thanks much as always! Cheers.
  12. Nested Timelines Eventually Sync

    They all need to start at small stagger intervals. Take another look at the demo posted to get a better idea. I know there is a bit of code there but look for the function that controls floating orbs and the master timeline to understand the approach. Also please make sure if you fork the demo to keep it private and then remove it once this is answered as it's a secret project.
  13. Nested Timelines Eventually Sync

    Yup. Thanks Blake, although this doesn't seem to pertain to nested timelines still. I'm looking more at ways to avoid nested timelines that repeat from syncing as the playback continues over a period of time. Here's an example: function timeline1{ var tl = new TimelineMax({repeat: -1}); ... return tl } function timeline2{ var tl = new TimelineMax({repeat: -1}); ... return tl } function master() { var tl = new TimelineMax({ tweens: [timeline1(), timeline2()], stagger: 0.25 }); return tl; } master(); Eventually in my playback even though each isolated animation is longer or shorter than the other they eventually catch up to each other.
  14. Nested Timelines Eventually Sync

    This wasn't really solved but I found a solution on my own.
  15. Nested Timelines Eventually Sync

    I figured this would be tough since there was a ton of GSAP written. Unfortunately I don't write Lo-Dash