Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

11 Newbie


  • Rank
    Advanced Member

Contact Methods

Profile Information

  • Gender
  • Location
    Rochester, NY

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  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' });


    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: functio
  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 = do
  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 animati
  15. This wasn't really solved but I found a solution on my own.