Jump to content
Search Community

GRAY GHOST

Business
  • Posts

    41
  • Joined

  • Last visited

Everything posted by GRAY GHOST

  1. 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. 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. 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. 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. 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. 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. GRAY GHOST

    MorphSVGPlugin

    Would you all be willing to share an isolated CodePen with just the hero and his waving cape? That effect is pretty awesome IMO.
  8. 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 });
  9. @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 });
  10. 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!
  11. 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();
  12. 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.
  13. 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.
  14. 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.
  15. This wasn't really solved but I found a solution on my own.
  16. I figured this would be tough since there was a ton of GSAP written. Unfortunately I don't write Lo-Dash
  17. Trying to create a floating orb effect where each orb bubbles in and then sends a transmission to the child's brain. Each orb will send a transmission at different times, but avoid being close w/one another in terms of the actual transmission sequence. At some point during the entire animation the orbs that send the signal in diff. intervals eventually sync up. What would be the best way to control the transmissions from overlapping one another? BTW it is required that each orb float all the time even when another adjacent orb is transmitting.
  18. I've been spending some time reiterating, testing and refining the off canvas menu demo using Draggable. Currently works well across testing platforms such as iPhone 6 and the Samsung Galaxy S4. The current problem is that devices using touchstart will not allow text to be selected and copied. Here's the updated demo for reference. http://codepen.io/grayghostvisuals/pen/569ffceac4b0c1b3958ade9bd189ad94
  19. Great Addition. Voting for “alternate.” Easy to visualize the intention when reading the word.
  20. Thanks for the tips Blake and of course the guidance so far. Yeah, I guess I'll have to fine tune this for touch screens. Right now with all the updates so far and testing in Chrome on my Samsung Galaxy S4 I would rate this as somewhat unusable. Swiping is tough and selecting text to copy is non-existent. Menu text trigger also reacts oddly by requiring multiple taps to open the menu. Selecting text by using the mouse of course is much better since we started across the board; tested in Chrome, Firefox, Safari and IE10
  21. Blake, This is getting better and better! (I've only checked Chrome on my MacBook). Text selection is great because you can drag left to right and click again within the text to clear what you have highlighted. Only downside ATM from briefly looking is… 1. No longer can click anywhere in the doc to open the menu
  22. “In the future instead of pasting the full source of DrawSVGPlugin into the JS planel, please fork one of our pens ” Not to intrude in this issue, but Carl what do you think about documenting about it somewhere to avoid these issues from popping up (I've done it too obviously)? I would be someone to find value in that kind of thing. Maybe others? Just a thought. Carry on
  23. Blake: So I gave your demo a shot blake and adjusted a few more bits. I also removed the slight blur that takes place when selecting text. Overall this is getting much closer so thanks tremendously for putting in all this work towards a solution o_/ \_o Same to you as well Carl. Here's the demo updated as of 3:09pm EST with everything discussed up until this point http://codepen.io/grayghostvisuals/pen/569ffceac4b0c1b3958ade9bd189ad94 I have yet to test myself in IE nor on any touch devices. Will do so this evening. Cheers Chaps.
  24. An example almost there, but not quite. 1. http://kinglozzer.github.io/SwipeMe/demo/index.html Aside: It think besides having examples to show, this is a problem in general felt by the community and something we can help give back that is rock solid. Yup. Excellent research so far Blake. Keep it up rockstar.
  25. OSUBlake Nicely done, but selecting text in either direction still moves the window and menu slightly. If you drag to the left the menu will eventually open making copying and pasting a chore. Carl: I'm in the middle of gathering. Will post back with links. I assure you though they are out there just don't have a collection off the top of my head.
×
×
  • Create New...