Streaming live at 10am (PST)

Custom Animated SVG not playing on published site


#1

Hi there,

I have an issue with an SVG image that I am trying to display on my new website.
I have built a nice little SVG animation with css and javascript on codepen.
I then did everything this youtube tutorial explained to embed all the css and js within the svg file.

When I right click on the svg file and open it on google chrome, everything animates beautifully, but when I embed that very same svg file as an image on weblfow, nothing animte. Am I doing something wrong ? What would recommend ?

Read-only link

Thank you so much !
Anthony



#2

@anthonysalamin certain browser respond differently to animated svg’s, i looked at your read only and all I seen was an image it wasn’t until i viewed the svg source that i seen the issue… your stack in your svg is in bad array… you never want to post frameworks like gsap tween max in your svg images, set up your page just as they have on codepen or you would do normally.

use the tween max cdn, I would also put the js in custom…

when using tween max as well as other stack settings keep in mind the follow of direction order.

what I mean is if say you use bootstrap. the css and js must come first to avoid conflict.


#4

Thank yoiu so much @Poliigon, it solved my problem :smiley:


#5

Im glad to help @anthonysalamin