Jump to content
GreenSock

dilshan@jgsw.global

DrawSVG not working on Wordpress

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • 3 years later...

Hello, 

I realize that this is an old discussion but I have almost the same problem. I've added a ScrollTrigger animation and a simple tween to have a horizontal scroll and was working fine until I started adding content to the page. 

I've tried everything you mentioned in that post to debug the issue but it still not working. there's no errors in the console.

I would be grateful if you take a look on it.

 

HTML

<?php get_header(); ?>

<div class="infinite-scroll-wrap">
  <div class="wrapper">
    <section id="first" class="slide one">
      <p> Omnia </p>
    </section>
    <section id="second" class="slide two">
      <h1>2 Section <small>Secondary text</small></h1>
      <p> This is a content.</p>          
    </section>
    <section id="third" class="slide three red">
      <h1>3 Section <small>Secondary text</small></h1>
      <p> This is a content.
          kvkcx lmv nmcv, /cv <br>
          dnsvjksnvamdfnbklsdn/dgmn;dgmkldxn
      </p>          
    </section>
  </div>
</div>

<?php get_footer(); ?>

Js


// wait until DOM is ready
jQuery(document).ready(($) => {
  gsap.registerPlugin(ScrollTrigger);

  const red = document.querySelector(".red");

  gsap.to(red, {
    scrollTrigger: {
      toggleActions: "restart pause resume reset",
      start: () => red.offsetLeft - innerWidth,
      end: () => red.offsetLeft + red.offsetWidth - innerWidth,
      scroller: ".infinite-scroll-wrap",
      id: "color"
    }, 
    duration: 3, 
    backgroundColor: "#f6f4f2", 
    ease: "none"
  });	
  
  const sections = gsap.utils.toArray(".slide");

  gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".wrapper",
      scroller: ".infinite-scroll-wrap",
      pin: true,
      scrub: true,
      snap: 1 / (sections.length - 1),
      // base vertical scrolling on how wide the container is so it feels more natural.
      end: () => "+=" + (document.querySelector(".wrapper").offsetWidth - innerWidth)
    }
  });
});
  

functions

<?php
  $version = wp_get_theme()->get('version');

  function SnapStay_styles() {
    wp_enqueue_style('bootstrap', "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css", array(), null, 'all');
    wp_enqueue_style('style', get_template_directory_uri() . "/assets/css/main.css", array('bootstrap'), $version, 'all');

     wp_enqueue_script('jquery');
    wp_enqueue_script('popper', 'https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', array(), false, true);
    wp_enqueue_script('bootstrap',"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js", array('jquery', 'popper'), false, true);
    wp_enqueue_script('gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js', array('jquery'), false, true);
    wp_enqueue_script('scroll', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js', array('jquery','gsap'), false, true);
    wp_enqueue_script('main', get_template_directory_uri() . "/assets/js/main.js", array(), $version, true);
    wp_enqueue_script('main', get_template_directory_uri() . "/assets/js/main.js");
  }

  add_action('wp_enqueue_scripts', 'SnapStay_styles');

?>

CSS

body { 
	margin: 0; 
	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-width: none;
	-ms-overflow-style: none;
  }
  
  .red {
	background-color: #cf3535;
	background-image: none;
  }
  .slide {
	display: inline-block;
	width: 110vw;
	height: 100vh;
  }
  .wrapper {
	display: inline-block;
	white-space: nowrap;
	font-size: 0;
  }
  .wrapper > * {
	font-size: 1rem;
  }

 

Link to comment
Share on other sites

@Omnia it's not really clear what you're asking, and you've posted in an old thread that's focused on DrawSVGPlugin but you're not using that. Can you please create a new post instead and provide a minimal demo so we can give you some help? For example, here's a CodePen where I pasted your code and I have no idea what it's really supposed to do: 

See the Pen yLOXJaM?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Just hit the "fork" button in the bottom right and make whatever changes you want, and then create a new post for your question and we'll gladly dive in. Cheers!

  • Like 2
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.
×