Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dilshan@jgsw.global

DrawSVG not working on Wordpress

Recommended Posts

Hi there,

 

I just started using Greensock and I wanted to directly add them into my wordpress site. But I'm facing with a rather confusing issue.

I have a simple DrawSVG code that needs to be rendered in a page which works perfectly with a plain HTML file and javascript

 

HTML:

 

<svg id="Rays" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080">
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""/>
   </rdf:RDF>
</x:xmpmeta>                      
<?xpacket end="w"?></metadata>
<defs>
    <style>
      .cls-1 {
        fill: none;
        stroke: #fff;
        stroke-width: 3.79px;
        fill-rule: evenodd;
        filter: url(#filter);
      }
    </style>
    <filter id="filter" x="493" y="-6" width="964" height="683" filterUnits="userSpaceOnUse">
      <feGaussianBlur result="blur" stdDeviation="3" in="SourceAlpha"/>
      <feComposite result="composite"/>
      <feComposite result="composite-2"/>
      <feComposite result="composite-3"/>
      <feFlood result="flood" flood-color="#ffb64d" flood-opacity="0.35"/>
      <feComposite result="composite-4" operator="in" in2="composite-3"/>
      <feBlend result="blend" mode="screen" in2="SourceGraphic"/>
      <feBlend result="blend-2" in="SourceGraphic"/>
      <feFlood result="flood-2" flood-color="#ffba60"/>
      <feComposite result="composite-5" operator="in" in2="SourceGraphic"/>
      <feBlend result="blend-3" in2="blend-2"/>
    </filter>
  </defs>
  <g style="fill: none; filter: url(#filter)">
    <path id="path1" class="cls-1" d="M506,4l691,656,246-221" style="stroke: #fff; filter: none; fill: inherit"/>
  </g>
  
</svg>

 

Javascript:

jQuery(document).ready(function(){
  
  var t1 = new TimelineMax({repeat:-1});

t1
  .from("#path1",2 ,{drawSVG:0});

  });

 

I included the necessary greensock files using "wp_register_script" and "wp_enqueue_script". I utilized visual composers Raw HTML and JS elements to define the above code. But the animation isnt happening and there is no error on the console either.

 

Following are my enqueue scripts:

wp_register_script( 'TweenMax', get_template_directory_uri() . '/greensock/TweenMax.min.js' );
wp_register_script( 'TimeLineMax', get_template_directory_uri() . '/greensock/TimelineMax.min.js' );
wp_register_script( 'DrawSVG', get_template_directory_uri() . '/greensock/plugins/DrawSVGPlugin.min.js' );

wp_enqueue_script( 'TweenMax' );
wp_enqueue_script( 'TimeLineMax' );
wp_enqueue_script( 'DrawSVG' );

 

Simple Tweens such as changing filter to inherit is working fine with the SVG but animations like MorphSVG and DrawSVG seems to do nothing. Am I doing anything wrong or am I missing something. Any help would be great! Thank you in advance!

Link to comment
Share on other sites

Hello dilshan@jgsw.global and welcome to the GreenSock Forum!

 

Sorry your having an issue!

 

You could enqueue your scripts so your GreenSock scripts get placed at the bottom of the page before the body tag. The last parameter is true meaning it will add your code to  the bottom of the page instead of the default being in the <head> tag. Also you will notice i removed TimelineMax register because TweenMax includes all the goodies like TweenLite, TimelineLite, TimelineMax, EasingPlugin, CSSPlugin, AttrPlugin, etc..

 

wp_register_script( 'TweenMax', get_template_directory_uri() . '/greensock/TweenMax.min.js', array('gsap'), null, true ) );
wp_register_script( 'DrawSVG', get_template_directory_uri() . '/greensock/plugins/DrawSVGPlugin.min.js', array('gsap'), null, true ) );
wp_register_script( 'Custom_GSAP', get_template_directory_uri() . '/PATH_TO_CUSTOM_GSAP_CODE_SCRIPT/custom_gsap.js', array('gsap'), null, true ) );

wp_enqueue_script( 'TweenMax' );
wp_enqueue_script( 'DrawSVG' );
wp_enqueue_script( 'Custom_GSAP' );

 

See if that helps.. if not you may have to add some browser console.log() to output and see if your custom code is running before anything else. But I would add your custom JS after the DrawSVG register so it can run after TweenMax and DrawSVG

 

Resource:

wp_register_script: https://developer.wordpress.org/reference/functions/wp_register_script/

 

:)

  • Like 3
Link to comment
Share on other sites

Hello Jonathan,

 

Thank you for responding. I updated my enqueues with yours. There seems to be an extra bracket which i removed before adding it because it was causing a syntax error. After doing this the page source does not even show the files Tweenmax and DrawSVGPlugin in it. 

 

wp_register_script( 'TweenMax', get_template_directory_uri() . '/greensock/TweenMax.min.js', array('gsap'), null, true );
wp_register_script( 'DrawSVG', get_template_directory_uri() . '/greensock/plugins/DrawSVGPlugin.min.js', array('gsap'), null, true );
wp_register_script( 'gsscript', get_template_directory_uri() . '/greensock/gsscript.js', array('gsap'), null, true );

wp_enqueue_script( 'TweenMax' );
wp_enqueue_script( 'DrawSVG' );
wp_enqueue_script( 'gsscript' );

 

Link to comment
Share on other sites

Sorry about the typo.

 

This will be hard without seeing your site, but you can try to register it in the jquery array instead like this array('gsap') to array('jquery') so it is included with jQuery array

 

wp_register_script( 'TweenMax', get_template_directory_uri() . '/greensock/TweenMax.min.js', array('jquery'), null, true );
wp_register_script( 'DrawSVG', get_template_directory_uri() . '/greensock/plugins/DrawSVGPlugin.min.js', array('jquery'), null, true );
wp_register_script( 'gsscript', get_template_directory_uri() . '/greensock/gsscript.js', array('jquery'), null, true );

wp_enqueue_script( 'TweenMax' );
wp_enqueue_script( 'DrawSVG' );
wp_enqueue_script( 'gsscript' );

 

And make sure your theme has the wp_footer() call in your theme files index.php or whatever your main theme file is. WordPress will use that to output those scripts in the footer.

 

And dont forget to add console.log() to make sure what order your scripts are being called.

 

Resource:

wp_footer() : https://codex.wordpress.org/Function_Reference/wp_footer

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,

 

Once I updated the enqueue scripts with jquery the scripts are being loaded now. But still the svg is not animating. Following is the link to the website:

 

http://yalabz.com/dev/ba_test/

 

Hope that helps!

 

 

Link to comment
Share on other sites

Hello Jonathan,

 

I tried other methods to get this to work but unfortunately nothing helped. Simple tweens work with wordpress but advanced animations such as morphing and DrawSVG simply won't work. I hope you have a found a solution for this problem after posting the site in which im testing out greensock.

 

 

Link to comment
Share on other sites

Hello

 

The only way to find a solution is to look in your web inspector in the network tab JS selected. And see the order of the scripts loading, making sure it loads all the GSAP scripts with your custom GSAP JS loading last.. after all GSAP JS like TweenMax and DrawSVG. 

 

If you don't see them in the proper order that means your custom code might be running before GSAP code is loaded. Or the DOM (svg) isn't ready or loaded for the code to execute on.

 

When I look in the browser inspector on your site, I see the order of GSAP and Custom scripts like this:

  1. ScrollToPlugin.min.js
  2. greensock.js
  3. TweenLite.min.js
  4. custom.js
  5. TweenMax.min.js
  6. DrawSVGPlugin.min.js

So as you can see your custom.js is loading before TweenMax.min.js and DrawSVGPlugin.min.js, that's why it doesn't animate. Also you don't need to load TweenLite.min.js since your loading TweenMax.min.js which includes TweenLite.

 

You need to adjust that with the WordPress API methods .. like the add_action() method to change the priority of the order of enqueued scripts:

 

http://codex.wordpress.org/Function_Reference/add_action

 

And my StackOverflow answer regarding this:

 

http://stackoverflow.com/questions/19913960/enqueue-wordpress-plugin-scripts-below-all-other-js/19914138#19914138

 

:)

  • Like 4
Link to comment
Share on other sites

Hello Jonathan,

 

Thank you for responding. My custom code is being run on gsscript.js which, as shown in the screenshot attached, is after loading the TweenMax and DrawSVG. Also as shown in the screenshot I am console logging to test whether the script is running. This is being output in the console as well. I am back to square one. Hope you or anyone can help me out.

 

Thanking you once again for responding

Capture.PNG

Link to comment
Share on other sites

Have you tried other animations besides DrawSVG, like a basic TweenMax.to()? I'm curious if this is something specific to using DrawSVG.

It appears DrawSVG is loaded and available as you would probably get a console error like:

invalid drawSVG tween value 

 

I'm a little concerned that you are loading 2 versions of TweenMax: http://prntscr.com/farn33

 

I'd recommend disabling layerslider and themepunch to see if that remedies the situation.

 

 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Hey Carl,

 

Disabling layerslider did the trick! Thank you for the help!

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×