[SVG with encapsulated GSAP in WordPress]

Hi Jonathan,

 

Yes, the SVGs are loading from the same domain.

 

Too bad there isn't a way to use a fully encapsulated animated SVG with the image tag in WordPress.

 

This would be ideal for handing off assets to a client or agency.  

[SVG with encapsulated GSAP in WordPress]

Thanks for your reply.

 

Here is a live test. http://janetatkinson.com/work/svg-test/

Note: TweenMax is not loaded on this page.

 

1. Placed as iframe: (This works)

 

2. SVG uploaded as an image (Doesn't work.)

 

3. As a background image (Doesn't work)

 

It would be ideal to get #2 to work. I would just send the file and client uploads to WordPress, no fuss.

 

Thanks for taking a look at this.

 

Janet

[SVG with encapsulated GSAP in WordPress]

For your reference, here's the codepen 

See the Pen 1078b6af42e7ab6837f46c4ca3d0b7a9 by atkinson (@atkinson) on CodePen

[SVG with encapsulated GSAP in WordPress]

Here's the file. Note: It's a text file since I could not upload here as SVG.

 

 

Thanks!

[SVG with encapsulated GSAP in WordPress]

Hello All,

 

I successfully created a self contained SVG ad banner with Tween Max as per Chris Gannon's fantastic tutorial https://www.youtube.com/watch?v=S6P_N2JWSrc

 

(Thanks Chris!)

 

My test works in the browser but not in WordPress. 

 

Has anyone found a way to get WordPress to play nice with self contained SVGs?

 

This would be an ideal way to deliver ads to WordPress clients without needing to supply all dependencies.

 

Thanks.

 

Janet

[Uncaught TypeError: Cannot read property 'length' of undefined in WordPress]

I've found the answer!

 

As it turns out a plugin (LayerSlider WP) I believe also uses Greensock, so WordPress was loading it twice.

 

I deactivated LayerSlider and no more errors!!!

 

Hopefully this will help anyone else using GSAP with WordPress.

 

By the way, thanks for the great support.

[Uncaught TypeError: Cannot read property 'length' of undefined in WordPress]

Hi Jonathan,

 

Thanks so much for the quick response.

 

So TweenMax and my scripts are definitely in the footer, in the right order. 

This is how they look in my functions file:

wp_register_script( 'gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js', array(), false, true );
wp_enqueue_script( 'gsap-js' );
     wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-script-b.js', array(), false, true );
wp_enqueue_script( 'custom-script' );

And the var was in my file, for some reason I didn't paste it in the pen. (I tried both methods with same results)

 

Here's what's happening:

 

The animation runs normally but as soon as it stops the "Uncaught TypeError: Cannot read property 'length' of undefined" error appears in the console with a running counter. If I use repeat:-1 no error appears.

 

This particular site is still in the local dev stage, but I can make a live dev site to test if needed.

 

Thanks so much for your help! I'll be golden if I could just get GSAP working with WordPress!

 

Janet

[Uncaught TypeError: Cannot read property 'length' of undefined in WordPress]

Hello GSAP,

 

I've got my SVG animation working in CodePen, here's a rough start: 

 

but when I place in a WordPress site I'm getting this error in the console:

 

"Uncaught TypeError: Cannot read property 'length' of undefined".

 

I'm loading TweenMax via enqueue scripts in my functions file, so all is good there.

The SVG code is placed inline via visual composer/raw HTML.

 

Is this somehow related to doc ready? The js file begins with:  jQuery(document).ready(function ($) {

 

I'm at a loss as to how to fix this... Forgive me as I'm a GSAP newbie!

 

Any ideas? Thanks for your help!

 

 

See the Pen bVqqBm by atkinson (@atkinson) on CodePen

[Help me understand: seamless loop of clouds]

That's great.  Thanks so much!

[Help me understand: seamless loop of clouds]

Hi Carl,

 

I'm new to GSAP and love it so far.  

I've forked the clouds sample you created. 

See the Pen PPwVjr by atkinson (@atkinson) on CodePen

 

I'd like them to move slowly, with varying opacity, in a staggered fashion. 

 

My questions are:

1. Is there a trick to prevent the clouds from bunching up, sometimes they come in as a cluster.
2. And how can I vary opacity?

Thanks so much!

 

Janet