Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Posts posted by fernandocomet

  1. This should be easier 🤦


    Ok, as you said, if I go to greensock.com/install and I want to use GSAP SplitText, I have this message:




    And then they say:

    SplitText.min.js is a Club GreenSock perk which is not available on a CDN. Download it from your GreenSock account and include it locally like this:

    <script src="/[YOUR_DIRECTORY]/SplitText.min.js"></script>


    So, for this case I cannot use CDN

    The problem is this: We can not upload .js files to Webflow, that is the main problem


    I tried it converting the .js file to a .txt and uploading it as an asset, so I call it in the script. I had the error:

    Uncaught SyntaxError: Cannot use import statement outside a module
    (index):29 Uncaught ReferenceError: SplitText is not defined
        at (index):29:21



    Also I tried to copy and paste the code from the .js but it is not working





  2. I am having lots of problems with this also.
    I believe the issue is related with Webflow and not with GSAP library as my Codepens are working ok 


    I am working for a company with a GSAP Shockingly green plugin
    I have issues with TextPlugin library, I have in console error "Uncaught ReferenceError: SplitText is not defined"

    I believe the issue is related with the way I call the library. Actually I have the TextPlugin uploaded to a CDN but my issue persist


    Also I should say Webflow has some limitations:
    10.000 characters code for each embed

    There are three places where you can add Custom Code:

    •  Project Settings - Custom Code

    Add code at the end of the <head> tag:
    Add code before </body> tag:

    • Each Page Code

    Inside <head> tag
    Before </body> tag

    •  Custom Embed Code

    I tried with both:
    <script  src="whateverCDNurl/src/TextPlugin.js"></script>
        <script type="module" src="whateverCDNurl/src/TextPlugin.js"></script>
    But my error persist

  3. Hi,

    I am working in React + GSAP

    I try to animate different paths (ids) from an svg asset (see image attached)

    I am trying to animate the different paths on Hover/out

    I am Following this example https://codesandbox.io/s/react-hover-forward-ref-pthnx but only the last one is being animated.


    I think I have sintax problems.

    Should I use a timeline instead?


    My demo is here: https://codesandbox.io/s/little-circle-gsap-43pcbs?file=/src/App.js


    Any help is welcome



    Screenshot 2022-05-30 at 16.50.47.png

    See the Pen App.js by s (@s) on CodePen

  4. Hi there!


    I am making a portfolio site. I am building it in React and using GSAP.

    I have found the following problem: Say my site has four sections:

    Home / Text / Works / About


    And I will use GSAP on section 2 "Text", so if I navigate to this section it is ok, but if you go to another section and go back to "Text" I have this warning:

    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

    Also performance fails (as you see the text go changing but the order is broken)


    I don´t know if it is asking too much, but maybe you can give me some guidance of what is really happening


    I have seen documentation of GSAP and React and believe it is related to State management and components.  Not sure if I have to use React Transition Group in my component "Text.js" or how can I overtake this warning


    Here you can see the error

    Any help is welcome


    See the Pen by s (@s) on CodePen

  5. Hi,


    In the demo, I want to change the text for each time color changes.

    I used to do this with Set or with an onComplete

    I´m trying to do it with .add but target is wrong ("target message not found")


    function changeText(arr) {
      gsap.to("#message", { text: changeText(messages) });
    var tl = gsap.timeline({ repeat: -1 });
    colors.forEach((color) => {
      tl.to("#message", { xPercent: -50, left: "50%", duration: 0, delay: 0 })
        .to("#bg", { backgroundColor: color.dark, duration: 1, delay: 3 })
        .to("#message", { color: color.light, duration: 1, delay: 0 })
    function generateText() {
      gsap.to("message", { text: changeText(messages) });
    let counter = 0;
    function changeText(arr) {
      counter = counter + 1;
      return messages[counter].title;

    Any help is welcome

    See the Pen xxwzmmX by fernandocomet (@fernandocomet) on CodePen

  6. Thank you Zach


    I want to change color of background of text every constantly, asigning the colors of my Array (dark/light)

    I wonder if it can be made with gsap timeline or if there´s a better option

  7. I want to change color of my background and text again and again parsing my array of colors. 


    I don´t know if I can do that using a variable or changing itemColor value, I was thinking in using an onComplete funcion by I will use this inside React, 

    let itemColor = 0;
    var tl = gsap.timeline();
    tl.to("#bg", {
      backgroundColor: colors[itemColor].dark,
      duration: 1,
      delay: 3
    }).to("#h1go", {
      color: colors[itemColor].light,
      duration: 1,
      delay: 0

    Also I have a Codesandbox link for React https://codesandbox.io/s/gsap-react-text-gsaptimeline-cuk58?file=/src/App.js

    Thanks in advance

    See the Pen gOaebxY by fernandocomet (@fernandocomet) on CodePen