Carl last won the day on January 14

Carl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Carl last won the day on January 14

Carl had the most liked content!

Community Reputation

8,748 Superhero

About Carl

  • Rank

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hi and welcome to the GreenSock forums, Thanks for the demo. It looks like you have a good handle on the GSAP API. I really don't understand ScrollMagic enough to be able to help you. It's not a GreenSock product. From the Github page it appears it is being developed again. For support try: If you have GSAP questions we'll do our best to help.
  2. Carl

    Responsive spritesheet animation

    thanks for the demo. I didn't have time to validate all your logic for the dimensions. It seemed odd that the responsive animation didn't change size on window resize, but I did make it so that you could resize the window and the animation would not break. I think the issue was that you were creating additional new timelines on each resize while the previous timeline was still running. This was throwing off the start values of your animations. in my example I bring the playhead of the timeline back to a time(0), clear() the timeline and put new tween inside it //make the timeline once outside your function var tl = new TimelineLite(); animatedSprite(); function animatedSprite() { var animationElement = document.querySelector(".animation"); var maskWidth = document.querySelector(".animation-mask").clientWidth; var animationTotalFrames = 10; = parseInt(maskWidth * animationTotalFrames) + "px"; var animationElementWidth = document.querySelector(".animation").clientWidth; var spriteRealWidth = parseInt((animationElementWidth - maskWidth) * -1) + "px"; //set the time to 0, clear the timeline and rebuild it tl.time(0).clear();, 1, { repeat: -1, x: spriteRealWidth, ease: SteppedEase.config(animationTotalFrames - 1) }); } Please see fullsize demo here.
  3. Hi and welcome to the GreenSock forums. thanks for the demo. It seems you were setting this.x as the target of your tween bad, 0.4, {scale: 2} ), 2, {scale: 2} ) good, 0.4, {x:400} ), 2, {y:400} ) obviously, you'll have to use the right values for x and y. Just wanted to show you how to get the tweens working.
  4. Carl

    Free Hosting Sites that supports GSAP

    Can you send me a link to the page where you tried my suggestion? It would be really helpful to be able to look at it and see if we can figure out why that code isn't working. Is netlify producing an error that says it doesn't allow you to load GSAP? Are you able to upload TweenMax to your site along with your other JavaScript files? Perhaps they don't like things that come off of a cdn. Just guessing here, I haven't used free hosts in a very long time, but it just seems very strange that a host would feature react, but not allow GSAP. Kind of puzzled.
  5. Hi and welcome to the GreenSock forums, It's really tough to guess what is going to work in your application. A small demo would really help as explained here: Working with callback scope can be tricky until you see it in practice. In the world of GSAP the scope of a callback is the tween or timeline that is calling the callback. If a tween calls an onComplete callback, then the keyword "this" inside that function is going to refer to that tween. If you want "this" to represent some other object, then you need to specify that in the callback scope. Please study this example and see if it helps var myObject = { x:1234567 }"h1", 1, {x:100, onComplete:tweenScope});"h3", 2, {x:100, onComplete:myObjectScope, onCompleteScope:myObject}); function tweenScope(){ // this = the first tween console.log("the duration of this tween is " + this.duration()); //1 } function myObjectScope() { // "this" = myObject console.log("the x of myObject = " + this.x) //1234567 } View on codepen and open the console I suspect in your case you want a scope of mainComponent or this. also, I don't think you want the () when defining your callback usually bad because close() will execute immediately onComplete:mainComponent.close(); good onComplete:mainComponent.close;
  6. Excellent! I was just about to take a stab. Very glad you found a solution with 1 timeline. Definitely the way to go.
  7. Carl

    Free Hosting Sites that supports GSAP

    Hi and welcome to the GreenSock forums, Sorry, I'm not really familiar with Netlify, but I'm very surprised to hear that a host would not support GSAP. Are you saying they prohibit you from loading TweenMax from the cdn like: <script src=""></script> As long as you can edit html on your site you should be able to put this on your page <script src=""></script> <script>"body", 5, {backgroundColor:"red", scale:0.5}); </script> GSAP is used on over 7,000,000 sites and I've never heard of a host not allowing it. That is very strange. Perhaps I am misunderstanding something.
  8. Carl

    Trouble with the big chain of animation

    Hi and welcome to the GreenSock forums, Nice job on the animation. Looking good. I don't really know what you mean by "the animation orders starts to stray". I looked at it a bunch of times and to me it always looks the same. Please keep in mind it is extremely difficult to look at 200 lines of code and try to make sense of it. Especially when we have no idea what things like clone6 and clone5 actually look like or where they are supposed to be. GSAP's timing is also super precise. On each update it renders things where they should be at that time... even under stress. I wonder if perhaps your negative delays are causing some problems. A negative delay isn't really logical. Can you wait -3 seconds for something to happen? I would strongly suggest you study the position parameter and use it to schedule when you want your tweens in your timeline to start What you are doing as, 1, {x:200, delay:-1}) should be, 1, {x:200}, "-=1");// start this animation 1 second before the previous animation ends. It would greatly help if you could make those changes AND simplify the demo as much as possible. Remove all unnecessary tweens and clearly describe the behavior you are seeing that you are not expecting. Thanks!
  9. Carl

    Animation: Grow Tree Branch With Leaves

    Also you could just draw your branch and leaves as an svg in illustrator / sketch and do some animations where they scale And fade in. Probably best to to post a demo of what you are working with.
  10. Carl

    Animation: Grow Tree Branch With Leaves

    Although there are probably many ways to approach it, the demo below from @OSUblake should give you an idea of the level of complexity involved in something like that:
  11. Carl

    Infinite Scroll - Load Next Post

    HI Miks, Someone might have an example for you but we really have to keep the support here focused on the GSAP API. A google search for "infinite page scroll html" will give you plenty of options. Also, stackoverflow is a great place for general web dev questions like this.
  12. Carl

    .set() for a custom attribute is not working

    The best thing to do is read as much as the documentation as possible I think you'll be surprised at the level of detail that is put into the explanations. However, the primary focus of the docs is on how to use the API. Discussing the overall design and decision-making process that went into the API is probably better suited for an article some day. FWIW there is an extremely detailed article discussing how GSAP uniquely handles animating transform values that will be launched in the not-so-distant future. Also, go through the blog posts, even ones a few years old. Lots of important info in those. --- I just guessed for the 0.2 second delay. A set() has 0 duration so in order to read the value that was set, it's best to wait for the next tick of the engine (which runs at 60fps) to be able to read it. I could have put a call() in the timeline also at a non-zero time as well.
  13. Carl

    .set() for a custom attribute is not working

    To change an attribute use the AttrPlugin It's included in TweenMax midi_tl.set(document.getElementById("__midi"), {attr:{fan:360},width:100})
  14. Carl

    Text revealing animation

    hmm, it looks like your demo went away while i was working on this and I deleted the css animations. Here is a basic approach: I didn't have time to match the timing. So weird to have to figure out things like what 15% of 7 seconds is or to script an animation by percents and then apply an overall duration. Hopefully you find the GSAP way is MUCH more intuitive. Definitely spend some time here:
  15. Hi and thanks for the demo. Yeah it seems pretty clear that the problem is that you have a scrollTo animation inside a ScrollMagic scene. I don't know enough about ScrollMagic (not a GreenSock product) to tell you how to fix that. I'm having a tough time understanding the logic of having a scrollTo animation inside a ScrollMagic scene. The whole point of ScrollMagic is to trigger animations while the user is actively scrolling the window... so why would you want to scroll the window a position that conflicts with where the user wants to scroll to? My hunch is that you would be better off tweening the y value of something inside of #section-2 instead of telling the window to scrollTo where #section-2 is, but again, ScrollMagic isn't my specialty. There might be others around here that can give you better advice.