gsap not animating

[Kutomba]

Hi all

Our company purchased gsap bussiness plan , and we downloaded the  latest gsap

here is folder . 

 

 

so far we are just testing , so I uploaded gsap.min.js and SplitText.js from folder minified  to my server 

 

Now I created a simple animation for testing as follows 

 

gsap.to(".reveal-line", {duration: 2, x: 200, ease: "bounce"});

but its not animating at all and no errors  whatsoever

 

addition information: we have two domain : dev.xxxx.com  and  www.animation.com , animation is being used in  dev.xxxx.com as iframe 

 

Note: all script in network are loaded 

 

 

Why gsap is not animating ? 

 

[GreenSock]

Hm, it's pretty tough to diagnose blind but the only odd thing I noticed from your screen capture is that you're loading a really old version of GSAP (TweenMax.min.js) and also a newer one (gsap.min.js). You definitely should dump the TweenMax.min.js file. Totally unnecessary. 

 

You probably don't need anime.min.js either

 

If you need some more help, please provide a minimal demo so that we can see what's happening. We'd love to help. And thanks to your company for joining Club GreenSock. 

[Kutomba]

I know that, I wish some one could help, I can share my screen if anyone willing to help , because its a huge project so I cant share it whatsoever online if anyone will be willing to help check me private I will share my screen, because I realy need help on this, thanks all 

[Kutomba]

30 minutes ago, GreenSock said:

Hm, it's pretty tough to diagnose blind but the only odd thing I noticed from your screen capture is that you're loading a really old version of GSAP (TweenMax.min.js) and also a newer one (gsap.min.js). You definitely should dump the TweenMax.min.js file. Totally unnecessary. 

 

You probably don't need anime.min.js either

 

If you need some more help, please provide a minimal demo so that we can see what's happening. We'd love to help. And thanks to your company for joining Club GreenSock. 

I tested with ID now its animating , the problem was I have a 8 divs with the same class , I think that is why gsap was not animating

[GreenSock]

3 minutes ago, Kutomba said:

I tested with ID now its animating , the problem was I have a 8 divs with the same class , I think that is why gsap was not animating

Nah, GSAP can handle as many elements as you want to throw at it. In fact, it's quite normal to use className selectors to animate multiple things in GSAP. It's perfect for staggers. So there must have been something else going on in your app. 

 

We really don't need to see your entire huge project - it's definitely best if you can just try to create a minimal demo even if it's just one <div> in CodePen or something. It's a great troubleshooting technique even if you never show it to anyone. In my experience, when I force myself to break it down into a minimal demo, it almost always exposes the problem and I end up fixing it myself

 

But rest assured, you do NOT need to use IDs for your selectors. It's fine if you want to, but that isn't necessary. There must have been something else going on in your app that was causing the problems. Once we see something in the browser, we can offer better input. 

[Kutomba]

17 minutes ago, GreenSock said:

Nah, GSAP can handle as many elements as you want to throw at it. In fact, it's quite normal to use className selectors to animate multiple things in GSAP. It's perfect for staggers. So there must have been something else going on in your app. 

 

We really don't need to see your entire huge project - it's definitely best if you can just try to create a minimal demo even if it's just one <div> in CodePen or something. It's a great troubleshooting technique even if you never show it to anyone. In my experience, when I force myself to break it down into a minimal demo, it almost always exposes the problem and I end up fixing it myself

 

But rest assured, you do NOT need to use IDs for your selectors. It's fine if you want to, but that isn't necessary. There must have been something else going on in your app that was causing the problems. Once we see something in the browser, we can offer better input. 

 

ok, I have a div ,which dynamically I am generating the same div 4 times, but each div containts its own color , here is how its looks 

 

 

Now I would like to animate this div which have the following html 

 

    <div class="container">
         <div class="content-box">
                 <div class="textbox">
                     <span class="textclass letters">Your Text '</span>
                 </div>
             </div>
    </div>

when I animate using anime.js I use the following selector  which works fine its animate as I want 

  targets:  text.tag.find(".content-box .textclass")[0], 

 

now when I try to animate with gsap I do like this assume I want reveal animation

 

                    //Text reveal Animation using Gsap                    
                    //append span for border line 
                    text.tag.find(".textclass").append($('<span class="reveal-line"></span>'));

                    var duration = 1;
                    var tl = new TimelineMax();
    
                    var revealLine = text.tag.find('.reveal-line')[0];
                    var blockText  = text.tag.find('.content-box .textclass')[0];
                
                    tl.from(revealLine, 0.5, {width:0}) 
                
                    .to(blockText, duration, {clipPath:"inset(0px 0px 0% 1px)", ease:Linear.easeNone, repeat:3, yoyo:true}, "reveal")
                    .to(revealLine, duration, {top:"104px", ease:Linear.easeNone, repeat:3, yoyo:true}, "reveal")
                    .to(revealLine, 0.5, {width:0})

Unfortunatelly this is not working , what is wrong with my codes ? meaning no errors but its not animating

[ZachSaucier]

Hey Kutomba. First off, we highly recommend that you use GSAP 3 formatting. I think going through the following articles would be greatly beneficial to you:

 

Besides that, it's really hard to figure out what's going wrong based only on the given code. Please make a minimal demo if you'd like our help debugging:

 

[GreenSock]

Trust me - you'll save yourself a lot of time if you just create a minimal demo in CodePen or something rather than trying to go back and forth copying/pasting little snippets from a much larger project. We really want to help you, but our hands are tied. 

 

GSAP can do everything anime.js can do, plus a whole lot more. So if you have something working with anime.js, it'll work with GSAP. You must have something else that's interfering which we can't see with these little snippets that use the old syntax. Also beware that many browsers won't render transforms on <span> elements (display: inline). That's not a limitation of GSAP - it's a browser thing. 

 

Once we see something in the browser, I'm sure we'll be able to offer some advice.