WilliamBay
Members-
Posts
23 -
Joined
-
Last visited
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
WilliamBay's Achievements
- Rare
- Rare
- Rare
Recent Badges
14
Reputation
-
WilliamBay changed their profile photo
-
Thanks @OSUblake. Appreciate the response. It doesn't look like the animation is running here in the embedded Pen. Not sure if you had a chance to see the full Codepen. But I'm wondering where I might get started. What I have right now is SVGs exported from vectors in Illustrator. I'd need to figure out how to make the jump from that into the WebGL world. Any suggestions on where to start? Thanks! William
-
Working on a project right now and experiencing some performance issues https://kelvindev.wpengine.com/ The animation is in the hero section of the site. It's two SVG spiral shapes that loop infinitely through all the paths and change the opacity of each. I have a simplified version of this at https://codepen.io/bahia0019/pen/bGLepWP?editors=0110 When the animation is enabled, it has a pretty significant impact on the rest of the site. Scrolling is glitchy. The next section has a scroll triggered animation which is very choppy. I'm wondering if it's just too many paths (about 75 paths make up each SVG) to be animating, or if there's something that can be done to improve the performance.
-
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.
-
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.
-
@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.
-
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!
-
Ah, gotcha. I'm using Const, but not ES6. I'll have a look at your compiled code. Thanks!
-
@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?
-
Dear god thank you!!! I was hitting my JS wall trying to figure that one out.
-
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?
-
Hmmm.. that works on the first, but not the second. I see where you were going with it though.
-
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()
-
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.
-
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()
-
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();