Blocs + Animated SVG

mackyangeles · August 15, 2018, 1:40pm

We’ve just updated our website!!! Now Blocs + Animated SVG

https://www.consyncdigital.com/

Power of Blocs App!

Blocs_User · August 15, 2018, 2:10pm

Looks nice @mackyangeles, the tile should be “Blocs + Keyshape = Animated SVG”

I’m just curious why not 1 SVG vs using 2 like you did ?

mackyangeles · August 15, 2018, 2:30pm

Hi @Blocs_User, thank you! yep! Keyshape is awesome!

Why not 1 SVG vs using 2? I have to set it as background. So I have to separate the bloc for content

Blocs_User · August 15, 2018, 4:19pm

Yeah sorry I spoke without observing things enough, I was focused more on the SVG itself, oops.

Jasper · August 16, 2018, 1:50pm

@mackyangeles Sweeeet! very nice indeed. How exactly did you achieve this? Could make a wild guess but would love to know if you feel like sharing.

mackyangeles · August 16, 2018, 4:48pm

Just create an Animated SVG via Keyshape and set it as background

Flashman · August 30, 2018, 9:08am

@mackyangeles I just looked this is up on the website Can I use... Support tables for HTML5, CSS3, etc and SVG browser compatibility varies widely depending on the usage. Have you have tested this with browsers like IE and Edge to see what happens?

webdeersign · August 30, 2018, 10:09am

Surprisingly, it works fine on latest Edge but not on IE11 with Win10 (all up to date).

HMM · August 30, 2018, 2:48pm

When factoring using “cool effects” you might want to check page speed…just a tip.

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fconsyncdigital.com%2F

Google Page Stats:

PSI estimates this page requires 6 render-blocking round trips and 55 resources (6.7MB) to load. Fewer round trips and bytes results in faster pages.

The proper way to test page speed is by an actual test …the results do have to be with a “grain of salt” a bit but customers do just leave slow loading sites. It also affects your SEO. If you check your google analytics for example you will see the bounce rate improve in your favor with faster loading pages. Especially the home page…

pmweb · August 31, 2018, 7:32am

May I ask, once you create it in Keyshape what export format and options do you use to make it work in Blocs ? Thanks for your help.
Cheers
Phil

mackyangeles · August 31, 2018, 8:11am

Animated SVG format

pmweb · August 31, 2018, 9:53am

Hi Thanks for your prompt reply. @mackyangeles

However, under format only the following options are available :

SVG
SVG Compressed
PNG
JPG
Animated GIF
MPG-4

And under Animation the options are :

None
KeyShape JS Animation
CSS Animation
Image Sequence
Sprite Sheet

I have tried a number of different combinations but cannot get it right.

Which options have you chosen ?

Thanks again for your help.

Cheers
Phil