WilliamBay

SimplyGreen
  • Content count

    21
  • Joined

  • Last visited

Community Reputation

14 Newbie

About WilliamBay

  • Rank
    Member

Recent Profile Visitors

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

  1. WilliamBay

    Brand New Site & Thank YOU

    Hey all. Thanks again. I had to take a week off from screens after we launched that site. Glad you like the site. A lot of effort went into it.
  2. WilliamBay

    Brand New Site & Thank YOU

    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.
  3. WilliamBay

    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.
  4. WilliamBay

    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!
  5. WilliamBay

    SVG Masks in a Loop

    Ah, gotcha. I'm using Const, but not ES6. I'll have a look at your compiled code. Thanks!
  6. WilliamBay

    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?
  7. WilliamBay

    SVG Masks in a Loop

    Dear god thank you!!! I was hitting my JS wall trying to figure that one out.
  8. WilliamBay

    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?
  9. WilliamBay

    SVG Masks in a Loop

    Hmmm.. that works on the first, but not the second. I see where you were going with it though.
  10. WilliamBay

    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()
  11. WilliamBay

    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.
  12. WilliamBay

    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()
  13. 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();
  14. WilliamBay

    onRepeat Callback

    @Sahil THANK YOU! Those are all very helpful comments. I really appreciate it.
  15. WilliamBay

    onRepeat Callback

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