[DrawSVG not working on Wordpress]

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;
  }

 

[Horizontal scroll and toggleActions]

You're a wonderful human being. Thank you !

[Horizontal scroll and toggleActions]

It worked perfectly but with a horizontal scroll movement, so I add the function (gsap.utils.toArray) to fix it. The problem is that now I can scroll horizontally but the color animation is not working anymore

Thanks a lot for your reply

See the Pen vYGXYxe by Omnia- (@Omnia-) on CodePen

[Horizontal scroll and toggleActions]

Hi,

I'm new to gsap so I'm not sure what's causing the animation to play only once in this demo despite of (toggleActions: "restart pause resume reset")

The horizontal scroll trick here is having 2 containers and rottating the inner container so it scroll horizontally. *I hopw you see what I mean in the codepen

any suggestions? 

See the Pen gOrMBLL?editors=0110 by Omnia- (@Omnia-) on CodePen