[Performance Issue]

On 5/10/2022 at 3:20 PM, OSUblake said:

 

If animating that many paths is slow, you'll probably have to switch to faster rendering technique, like using HTML5 Canvas or WebGL.

 

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

[Performance Issue]

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 

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.

See the Pen bGLepWP?editors=0110 by bahia0019 (@bahia0019) on CodePen

[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.

[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. 

 

[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.

[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!  

[SVG Masks in a Loop]

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

 

Thanks!

[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?

[SVG Masks in a Loop]

2 minutes ago, OSUblake said:

Here's how you could set the mask dynamically.

 

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

[SVG Masks in a Loop]

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?

[SVG Masks in a Loop]

Hmmm.. that works on the first, but not the second.

I see where you were going with it though. 

[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() 

 

[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. 

[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()

 

[Trigger animation based on CSS Property Change]

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();

 

[onRepeat Callback]

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

[onRepeat Callback]

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

[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?

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

[Custom Rotation on elements in a Path]

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

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

 

[Custom Rotation on elements in a Path]

@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. 

[Custom Rotation on elements in a Path]

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.

 

[Custom Rotation on elements in a Path]

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? 

[Custom Rotation on elements in a Path]

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