Jump to content
GreenSock

WilliamBay

Members
  • Posts

    21
  • Joined

  • Last visited

Posts posted by WilliamBay

  1. https://thebirdthebear.com/

    After months of learning, and hitting walls, and throwing phones, and punching laptops, I've finally launched one of the most ambitious sites I've ever done.
    I learned SO much! And my Javascript skills have improved and evolved immensely.

     

    I'd love to hear your thoughts. Just about everything on this site is animated, and if it isn't text or photography, it's an SVG.

    If you see things that can be improved in any way, I'm open to hear about it.

     

    Special thanks to those that have responded to my posts and questions here in the forum:
    @OSUblake Big ups for your help with the dynamic ID thing!
     @Sahil, @Carl, @GreenSock You all have helped along the way too! Thanks a ton. 

     

    • Like 5
  2. @OSUblake DUDE! That was awesome. I have heard of hoisting before. And I'm sure I even learned about the concept, but how you broke it down was great. I really appreciate the real world lesson!!! And thanks for all your help yesterday.

  3. OK! I finally got it! Thanks so much for your help on that @OSUblake and everyone else.

    Do you mind if I ask a fundamental JS question?

    I understand what's going on for the most part. 

     

    But this line:

    branchGroups.forEach(branchDraw)


    You call the function on the next line, but I thought you had to have a defined function when you're passing it in like that? Do you mind explaining a bit how that works? Or maybe point me to a Youtube explainer video on that concept? Pretty pictures and videos help! :D 

  4. 6 minutes ago, PointC said:

    I think the problem is the second SVG is picking up the masks from the first SVG since they have the same IDs.

     

    6 minutes ago, PointC said:

    I think you'll have to switch to unique mask IDs.

     

    I was afraid of this.
    Now am I going to be able to do this dynamically on the same SVG, or will I have to create unique SVGs for each animation?

  5. We're getting somewhere now! It makes sense about the mask (also stopped me from going down a rabbit hole when console.log( mask ) didn't return anything in the console! :D

     

    So in this case, I'm grabbing the SVG itself, and using that as my iterator. Each animate, but the second one pulls two of the branches backwards...
    Very strange. 
    https://staging.thebirdthebear.com/ 

     

    23120324_10155937385209885_2483515398630

    const branchDraw = function() {
      const branchGroup = document.querySelectorAll(".branch-group")
      const layerOneMask = document.querySelectorAll(".layeronemask")
      const layerTwoMask = document.querySelectorAll(".layertwomask")
      const layerThreeMask = document.querySelectorAll(".layerthreemask")
      const layerFourMask = document.querySelectorAll(".layerfourmask") 
    
      for ( var i = 0; i < branchGroup.length; i++ ){ 
    
      const tl = new TimelineMax() 
    
      tl
        .from(layerOneMask, 0.5, { drawSVG: 1, ease: Power2.easeOut })
        .from(layerTwoMask, 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25")
        .from(layerThreeMask, 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25")
        .from(layerFourMask, 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25");
    
        const scene = new ScrollMagic.Scene({ triggerElement: branchGroup[i], offset: -300 })
          .addTo(controller)
          .setTween(tl)    
      }
    
    }
    branchDraw() 

     

  6. My bad for the poor code. The new Timeline should have been in the loop.

    I've corrected it, but it's still not working properly.

     

    The second SVG appears to be animating when the first one does. 

  7. https://staging.thebirdthebear.com/

    I'm working on this particular animation, and having some issues. 

    It's a four-branch frilly thing that is supposed to reveal each branch. Triggered with Scrollmagic.

    You can see it working properly on the first iteration in the section "OUR CRAFT."

     

    Each branch is being revealed by removing the respective mask.

     

    My issue however, is that the animation is not animating on the second iteration, "BRYAN & CARYN." 

     

    The masks in the SVG are called out as IDs, but the paths inside the masks are Classes (they're what are being called here in the code below).
    I'm not sure if that's the issue or what... 

    Thoughts? 

     

     

    const branchDraw = function() {
      const layerOneMask = document.querySelectorAll(".layeronemask")
      const layerTwoMask = document.querySelectorAll(".layertwomask")
      const layerThreeMask = document.querySelectorAll(".layerthreemask")
      const layerFourMask = document.querySelectorAll(".layerfourmask") 
    
      const tl = new TimelineMax()
    
      for ( var i = 0; i < layerOneMask.length; i++ ){ 
    
      tl
        .from(layerOneMask[i], 0.5, { drawSVG: 1, ease: Power2.easeOut })
        .from(layerTwoMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25")
        .from(layerThreeMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25")
        .from(layerFourMask[i], 0.75, { drawSVG: 1, ease: Power2.easeOut }, "-=.25");
    
        const scene = new ScrollMagic.Scene({ triggerElement: layerOneMask[i], offset: -300 })
          .addTo(controller)
          .setTween(tl)
          
      }
    }
    branchDraw()

     

  8. I am working on an animation ( makeItRain ) right now that takes a number of photos and moves them across the screen from left to right, using the Left property.
    What I'd like to do is trigger a secondary animation (branchDraw) when one of the images reaches Left:30vw; 
    I've looked into eventHandler, but that doesn't have a handler based in CSS updated properties.

    Where should I be looking for this kind of trigger?

    My code for reference. My project is local, but if I need to, I can put together a Pen. 
    branchDraw is the function to trigger when one of my rain elements hits Left:30vw;

     

    function makeItRain(branches) {
    	var rain = document.querySelectorAll('.home-rain');
    
    	for (var i = 0; i < rain.length; i++) {
    		rain[i].style.setProperty('top', Math.floor(Math.random() * 80) + 'vh');
    		rain[i].style.setProperty('left', Math.floor(Math.random() * -100) + 'vw');
    
    		rain[Math.floor(Math.random() * 10)].appendChild(branches);
    
    		var tl = new TimelineMax({ repeat: -1 });
    		tl
    			.set(rain[i], { top: Math.floor(Math.random() * 70) + 'vh' })
    			.to(rain[i], 30, { left: '150vw', ease: Power0.easeNone }, Math.floor(Math.random() * 20));
    
    		var tlBranches = new TimelineMax({ paused: true });
    		tlBranches.call(function() {
    			branchDraw();
    		});
    
    	}
    }
    makeItRain();

     

  9. I'm working on a custom Throbber for an upcoming client site.

    The idea is that the bird and the bear in the logo will blink their eyes every time the throbber does a full rotation.

     

    I've been looking through docs and other code, and can't seem to find the correct setting which will correctly call the eyesTL when the throbTL repeats.

     

    Any thoughts?

    See the Pen OOoqXm?editors=0010 by bahia0019 (@bahia0019) on CodePen

  10. @PointC What I just discovered is that the Rotation parameter needs to be added in ALL tweens, or it will not work.

    When I tried last night, I only added it to the first two tweens to test it.

     

    OK. Now we're in business!!!
     

    Thanks for the crowdsourcing on this one everybody. 

    • Like 1
  11. On 8/16/2017 at 1:04 PM, OSUblake said:

    That's pretty good @Carl

     

    You could also play around with adding the rotation to your Bezier values. Beziers aren't limited to x and y values. ;)

     

    
    TweenMax.to(element, 2, {
      bezier: {
        values: [
          { x: 100, y: 10, rotation: 0 },
          { x: 200, y: 20, rotation: -30 },
          { x: 200, y: 30, rotation: 30 },
          ...
        ]
      }
    });

     

     

     

     

    @OSUblake Can you fork this and show me this in action? When I do it, the animation doesn't respond to the rotation parameter.

     

  12. On 8/14/2017 at 10:00 PM, GreenSock said:

     

    
      CustomWiggle.create("randomWiggle", {type:"random", wiggles:4});
      TweenMax.to(birdTwo, 4, {rotation:50, ease:"randomWiggle"});

     

    For more info about CustomWiggle (a Club GreenSock membership benefit for "Shockingly Green" and higher), see https://greensock.com/wiggle-bounce

     

     

    The Wiggle looks good, but I'm looking for a little finer control. So as birdTwo moves in the first section of his path (towards the right), I'd like a slight rotation to the right. And then as it cuts back towards the left, to rotate back to 0 and then slightly more, then as it falls to level out, and then a slight rotation to the right as it returns back to it's original location, and levels out again.

    Can these rotation points be "attached" on to the bezier path in some way? 

  13. I'm interested in figuring out how to add custom rotations on the tweens between points on my paths.

    In the Codepen example, I have two birds animated, and would like to give have them turn slightly in the direction they are flying.

    It doesn't look like the autoRotate parameter does that, as they will shift the rotation angle at path apex, and direction shift.

     

    Would love some direction, or an example, or something to read.

     

    Thanks!

    See the Pen Evwgyv by bahia0019 (@bahia0019) on CodePen

×