WilliamBay

SimplyGreen
  • Content count

    19
  • Joined

  • Last visited

Community Reputation

8 Newbie

About WilliamBay

  • Rank
    Member
  1. SVG Masks in a Loop

    @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.
  2. SVG Masks in a Loop

    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!
  3. SVG Masks in a Loop

    Ah, gotcha. I'm using Const, but not ES6. I'll have a look at your compiled code. Thanks!
  4. SVG Masks in a Loop

    @OSUblake Is this line jQuery? I think this might be throwing something off. It's not console logging. Maybe it's cause this is WordPress. Is there a vanilla way to write this?
  5. SVG Masks in a Loop

    Dear god thank you!!! I was hitting my JS wall trying to figure that one out.
  6. SVG Masks in a Loop

    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?
  7. SVG Masks in a Loop

    Hmmm.. that works on the first, but not the second. I see where you were going with it though.
  8. SVG Masks in a Loop

    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! 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/ 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()
  9. SVG Masks in a Loop

    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.
  10. SVG Masks in a Loop

    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()
  11. 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();
  12. onRepeat Callback

    @Sahil THANK YOU! Those are all very helpful comments. I really appreciate it.
  13. onRepeat Callback

    Ahhh! Yes, duh. Function, not variable. Thanks for that. Interesting about the DevTools too. I just started using them, very handy.
  14. onRepeat Callback

    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?
  15. Custom Rotation on elements in a Path

    I might do a little more tweaking, but here's the final result: