Pete Barr

Ahhhhh! That really rings a bell now, doh! Thanks so much Shaun and Jack!!

Showing my severe lack of coding skills here I thought as it's just a string it would just evaluate with the index appended. I'm a little confused by vars[myWeight]=900 rather than say vars.myweight = 900 to add it to the object. Again, sorry, but mucho appreciate the help.

Hey all, I'm experimenting with animating variable font properties and in the pen example I can't seem to evaluate an increment of the weight property css variable name to be able to animate it. Is there something really silly I'm doing here in the JS? Thanks! Pete.

Cheers Jack! And thanks again for the help.

Thanks again for the help guys. Put the site live yesterday, phase 1 with more animation to follow: https://boysandgirls.ie/

Yeah, the scroll jacking is a little sensitive with a Magic Mouse but the best fit for purpose I could find. I'm mostly plugging into the callbacks to initiate animations outside its own DOM structure so definitely not using it 'straight out of the box'.

@Visual-Q Yip, setting and resetting the images to display none when the hero is animating paved over my stagger jitter issue. It's always the simple answer you overlook, doh! It's still strange the issue anyway but at least this removed the jitter. Cheers to everyone, mucho mucho appreciated!!! Hopefully, this is worth all the effort with only a couple of weeks left to build the site. I'll post the link here when I've finished. Pressure is on!! Ta!!

@Visual-Q Yeah the animation on the images works fine, it's just a simple scale tween. The images are in the viewport under hero header and are initially 'visible' but when the user scrolls down the header animates out and the images are displayed in sequence on scroll, so they are display: none when not 'in view'. I'm using fullpage.js to achieve this by extending upon its capabilities. I can set them all to display non initially which might help, I'll give that a try. I can't defer loading them as that would break the experience. @OSUblake Yeah using a retina display, does that have a bearing even though the issue is only present in Chrome? I checked out the FPS meter and there were no spikes in GPU, just a bit in the FPS as there is a few things animating at the same time. I know it's frustrating I can't show you the issue in reality since it's related to a rebrand, really sorry guys but I really appreciate all these suggestions as always.

Hi Jonathan, Unfortunately I can't share publicly on this occasion as it could cause me massive problems. I have an on('load') event so the images are loaded before these animations are fired. Cheers.

I narrowed the problem down to 3 images further down the page that are not related to the animation in question, and never referred to. These images are animated later when another function is called after an interaction is done. If I delete these images the logo stagger animation is fine and that issue in devtools is cleared. The images are using object-fit:cover and are larger than its container in most responsive circumstances. If I use one from placeholder.com, a small one, the logo animation is again fine. A large one and it's slightly janky but not to the same degree. If I delete all js animations bar the logo animation with the stagger, and keep the images (as in below), the jitter remains with the issue in devtools. I have no idea what's going on <img class="islide__img" src="<?php echo get_template_directory_uri(); ?>/assets/src/images/temp/bolt.png" alt="">

It appears that something else in the page is tripping it up sorry, so much going on. A minefield to debug

I can only assume you’re right. There is a fair bit going on and could be cleaner I’m sure, it just seemed strange for one small particular fragment to be removed and it cleans up. Thanks to all you guys, truly appreciate the time. I’ll PM you tomorrow. Cheers!

Svgomg removed all the transforms so didn’t appear to be that.

Still no joy

May just do that. Didn't do it this time around.