Oops! Trial version of SplitText deployed || I am not using SplitText

Rubenemilio · January 29

Hi everyone! The error i stated above shows on my website: "Oops! Trial version of SplitText deployed". It's the GSAP redirect, but i am not using SplitText. I am only using Observer. Below is the code:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  
  <title>LuksCommerce | Dein kaffee freund</title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css'><link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<div class="topnav" id="myTopnav" style="z-index:100000;position: absolute;">
  <a href="index.html" class="active">Home</a>
  <a href="uberuns.html">Über uns</a>
  <a href="produkte.html">
Produkte</a>
  <a href="kontakt.html">Kontakt</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
    <section>
      <div class="outer">
        <div class="inner">
          <div class="bg home">
            <div class="scroll">
              <p>Wir sind LuksCommerce</p>
              <p>Dein Kaffeefreund</p>
            </div>

            <img src="main.png" alt="" />
            <div class="home-content">
              <h1>
               Schön, dich kennenzulernen!
                
              </h1>
              <p>
                Wir sind LuksCommerce, der Kumpel, den jede Tasse Kaffee braucht!</br></br>
                Wir sind seit 2023 auf die Bereitstellung der besten Lösungen für Kaffee- und Heißgetränkezusätze spezialisiert und streben danach, jeden Tag besser zu werden! </br> </br> Unsere Mission ist es, Ihre tägliche Tasse Kaffee und Tee zu einem unvergesslichen Moment zu machen!
              </p>
              <ul class="links">
                <li>
                  <a href="#"
                    ><ion-icon class="icon" name="logo-apple"></ion-icon
                  ></a>
                </li>
                <li>
                  <a href="#"
                    ><ion-icon class="icon" name="logo-google"></ion-icon
                  ></a>
                </li>
                <li>
                  <a href="#"
                    ><ion-icon class="icon" name="logo-youtube"></ion-icon
                  ></a>
                </li>
                <li>
                  <a href="#"
                    ><ion-icon class="icon" name="logo-instagram"></ion-icon
                  ></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <img class="mouse-move" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/28313e5d-95f1-4e38-ac49-16b4cf006014" alt="" />
    </section>

    <section>
      <div class="outer">
        <div class="inner">
          <div class="bg content">
            <div class="swiper">
               <h2 style= "text-align:center;align-items:center;font-size:30px;font-family:sans-serif;font-weight:100;"> Unsere Partner</h2></br>
              <div class="swiper-wrapper">
                
                <div class="swiper-slide">
                  <img src="barbera.png" alt="Barbera" />
                  <div class="title">
                    <h2>Caffe Barbera</h2>
                    <p>Beste Kaffeebohnen</p>
                  </div>
                </div>

                <div class="swiper-slide">
                  <img src="theus.png" alt="Theus" />
                  <div class="title">
                    <h2>Theus</h2>
                    <p>Herzhafter, duftend Tee</p>
                  </div>
                </div>

                <div class="swiper-slide">
                  <img src="dells.jpg" alt="dells" />
                  <div class="title">
                    <h2>Dell's Lemonades</h2>
                    <p>geschmackvolle Toppings</p>
                  </div>
                </div>

                <div class="swiper-slide">
                  <img src="flair.png" alt="FLAIR" />
                  <div class="title">
                    <h2>FLAIR</h2>
                    <p>Reines Teekonzentrat</p>
                  </div>
                </div>

                
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section>
      <div class="outer">
        <div class="inner">
          <div class="bg info">
            <video id="coffeeVideo" autoplay loop muted>
    <source src="coffee.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
            <div class="info-content">
              <h1 style="color: rgba(187, 168, 76, 0.87);">Warum LuksCommerce?</h1>
              <p id="typedText">
                
              </p>
              
            
              <!--<div class="tag-container">
                <span>Timeless Hits</span>
                <span>Selected Playlists</span>
                <span>Remember & Discover</span>
                <span>Offline Enjoyment</span>
                <span>Ad-Free Nostalgia</span>
              </div>-->
            </div>
          </div>
        </div>
      </div>
    </section>
	 <section>
      <div class="outer">
        <div class="inner">
          <div class="bg content">
          
            <div class="swiper">
              <h2 style= "text-align:center;align-items:center;font-size:30px;font-family:Nunito, sans-serif;font-weight:450; display:block; width: 70%; margin-left: 15%;"> Möchten Sie mit uns zusammenarbeiten? <b>Kontaktiere uns jetzt!</b></h2>
              <h3 style="font-family:nunito, sans serif; font-weight: 800; font-size: 25px; color:#292f36; display:block; width: 68%;margin-left: 16%; align-items: center; text-align: center; margin-top: 30px;"> Email uns an</br> <b style="font-weight: 300;"><a href="#" style="text-decoration:none;color:#292f36;">kontakt@lukscommerce.at</a></b> </h3>
              </br>
              <hr style="width:80%;margin-left: 10%;">
         <div class="logolinksss" style="display:block; width: 100%; align-items: center; justify-content: center;  text-align:center;">     
         <ul class="f-links" style="justify-content:center;align-items:center;">
                
                <li>
                  <a href="#"style="height: 30px; width: 30px;"
                    ><ion-icon class="icon" name="logo-google"></ion-icon
                  ></a>
                </li>
                <li>
                  <a href="#"
                    ><ion-icon class="icon" name="logo-youtube"></ion-icon
                  ></a>
                </li>
                <li>
                  <a href="#"style="height: 25px; width: 25px;"
                    ><ion-icon class="icon" name="logo-instagram"></ion-icon
                  ></a>
                </li>
              </ul>
          </div>
                <div class="swiper-wrapper">

                
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
<!-- partial -->
  <script src='https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js'></script>
<script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js'></script>
<script src='https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/Observer.min.js'></script>
<script  src="./script.js"></script>
<script>
	function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

 document.getElementById('coffeeVideo').addEventListener('click', function() {
        if (this.muted) {
            this.muted = false;
        } else {
            this.muted = true;
        }
    });
	
	const text = "Wenn Sie eine gute Tasse belebenden Kaffee lieben oder gerne an einer heißen Tasse Tee nippen, wissen Sie, wie wichtig die kleinen Momente im Leben sind.Deshalb sind wir hier, um diese kleinen Momente unvergesslich zu machen!Mit einer großen Auswahl von über 100 Produkten und einer lebenslangen Zusammenarbeit mit großen Marken in der HoReCa-Branche bieten wir sowohl dem Normalverbraucher als auch den großen Unternehmen eine Lösung! \n\n Trinken Sie so gut Sie können, genießen Sie jeden Schluck!";
    const typedTextElement = document.getElementById('typedText');
    let index = 0;

    function type() {
        typedTextElement.textContent += text[index];
        index++;
        if (index < text.length) {
            setTimeout(type, 30); // Adjust the delay (in milliseconds) for typing speed
        }
    }

    type();
</script>

</body>
</html>

// GSAP

gsap.registerPlugin(Observer);

console.clear();

let sections = document.querySelectorAll("section"),
  background = document.querySelectorAll(".bg"),
  outerWrappers = gsap.utils.toArray(".outer"),
  innerWrappers = gsap.utils.toArray(".inner"),
  currentIndex = -1,
  wrap = gsap.utils.wrap(0, sections.length - 1),
  animating;

let clamp = gsap.utils.clamp(0, sections.length - 1);

gsap.set(outerWrappers, { yPercent: 100 });
gsap.set(innerWrappers, { yPercent: -100 });

function gotoSection(index, direction) {
  index = clamp(index); // make sure it's valid

  // If they are the same, it's either the first or last slide
  if (index === currentIndex) {
    return;
  }

  animating = true;
  let fromTop = direction === -1,
    dFactor = fromTop ? -1 : 1,
    tl = gsap.timeline({
      defaults: { duration: 1.25, ease: "power1.inOut" },
      onComplete: () => (animating = false),
    });
  if (currentIndex >= 0) {
    // The first time this function runs, current is -1
    gsap.set(sections[currentIndex], { zIndex: 0 });
    tl.to(background[currentIndex], { yPercent: -15 * dFactor }).set(
      sections[currentIndex],
      { autoAlpha: 0 }
    );
  }
  gsap.set(sections[index], { autoAlpha: 1, zIndex: 1 });
  tl.fromTo(
    [outerWrappers[index], innerWrappers[index]],
    { yPercent: (i) => (i ? -100 * dFactor : 100 * dFactor) },
    { yPercent: 0 },
    0
  ).fromTo(background[index], { yPercent: 15 * dFactor }, { yPercent: 0 }, 0);

  currentIndex = index;
  return tl;
}

Observer.create({
  type: "wheel, pointer",
  wheelSpeed: -1,
  onDown: () => {
    !animating && gotoSection(currentIndex - 1, -1);
  },
  onUp: () => {
    !animating && gotoSection(currentIndex + 1, 1);
  },
  tolerance: 200,
  allowClicks: true,
  preventDefault: true,
});

gotoSection(0, 1).progress(1);

// SWIPER

var swiper = new Swiper(".swiper", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  initialSlide: 1,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: false,
  },
  pagination: {
    el: ".swiper-pagination",
  },
});

Rodrigo · January 29

Hi @Rubenemilio and welcome to the GSAP Forums!

Indeed I don't see any SplitText related in your snippet, but this could be something else in your code adding the trial version somehow and creating that issue.

Try to run your code in your local machine using some dev server so you can get a url like this: localhost:<port-number>, then open devtools and in your console type this:

SplitText.version

You should see the version printed in the console.

Maybe this script.js file has the trial version in it:

<script  src="./script.js"></script>

Other than that I can't think of any reason for this.

Hopefully this helps.

Happy Tweening!

Rubenemilio · January 30

10 hours ago, Rodrigo said:
Hi @Rubenemilio and welcome to the GSAP Forums!

Indeed I don't see any SplitText related in your snippet, but this could be something else in your code adding the trial version somehow and creating that issue.

Try to run your code in your local machine using some dev server so you can get a url like this: localhost:<port-number>, then open devtools and in your console type this:
SplitText.version
You should see the version printed in the console.

Maybe this script.js file has the trial version in it:
<script  src="./script.js"></script>
Other than that I can't think of any reason for this.

Hopefully this helps.

Happy Tweening!

Hi, Rodrygo! The script.js file is the second code i uploaded, it doesn t seem to have the trial version in it, does it?

Rodrigo · January 30

Yep, there is nothing there SplitText related. This must come from something else in your codebase.

Did you checked the console log I suggested?

Happy Tweening!

GreenSock · January 30

It'd probably help if you could provide the URL where the problem is happening so that we could check the source ourselves. There must be a trial file being used somewhere in your codebase. 🤷‍♂️

Notifications

Messages

Oops! Trial version of SplitText deployed || I am not using SplitText

Recommended Posts

Rubenemilio

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Rubenemilio

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members