Jump to content
Search Community

jimeast

Members
  • Posts

    92
  • Joined

  • Last visited

Posts posted by jimeast

  1. How would I rewrite this to work in GSAP3

     

      var tL = new TimelineLite();
     
      tL.add("mylabel"2);
     
      tL.to("#frame1"2, { opacity: 1 });
      tL.to("#txt1".2, { y: 64, opacity: 0, ease:Sine.easeOut }, "mylabel");
      tL.staggerFrom("#squares img"0.8, {scale:0, y: 250, autoalpha:0, ease:Elastic.easeOut}, 0.1"mylabel");
     
      tL.from("#smiley"2, { x:-100, rotation: -360, ease:Back.easeOut }, "+=.4");
  2. I have a canvas parallax animation that I copied from an example in a Canvas text book.  I also have a GS animation which I copied from from a GS book.  I put GS animation over the canvas ant it works fine. My problem is I can't seem to find a way to mask it off so that you only see the car when it's over the canvas.  Thanks in advance.  Jim E.

    See the Pen mYddQJ?editors=1111 by jimeast (@jimeast) on CodePen

  3. I have a fairly extensive and up to date knowledge of JS and jquery.  I read that react is a good match for GSAP.  I set out to learn react a few days ago and the deeper I get into it the more complex it gets.  I want to use GSAP to make simple banner ads.  Might being proficient in REACT be overkill?

  4. Great!!  This works on codepen now if I can get it to work elsewhere.  

    This is the entire code just so we know I'm not missing something.

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Eat More Chowder</title>
      <style> body { background-color: #ccc; } </style>
    </head>
    
    <body> 
    <div id="text1">Eat</div>
    
    <script https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenLite.min.js></script>
    <script https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/TextPlugin.min.js></script>
    
    <script>
    var txt = document.getElementById("text1");
    TweenLite.to(txt, 2, {text:"New text here"});
      console.log(txt);
    </script>
    </body>
    </html>

    Every time I run I get this error:  Uncaught ReferenceError: TweenLite is not defined
        at eatMore.html:24      What am I doing wrong?

  5. It's about the simplest example possible and it's got me stumped.  When I run at home I always get a "TweenLite is not defined" error.

     

    This is copied from my editor at home.

    <body>

    <div id="text1">Eat</div>

    <script https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenLite.min.js></script>
    <script>
      var txt = document.getElementById("text1").innerText;
      TweenLite.to(txt, 2, {text:"New text here"});
      console.log(txt);
    </script>
    </body>

    See the Pen YJgrBr?editors=1111 by jimeast (@jimeast) on CodePen

  6. I've run this at home on different browsers same result.  As I understand split text just wraps the word in a div.  If I just wrap these words in divs manually and animated them I wonder what would happen?

     

     

×
×
  • Create New...