Carl last won the day on January 14

Carl had the most liked content!

Carl

Administrators
  • Content Count

    9,030
  • Joined

  • Last visited

  • Days Won

    525

Everything posted by Carl

  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: https://github.com/janpaepke/ScrollMagic/issues 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; animationElement.style.width = 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(); tl.to(animationElement, 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 TweenMax.to(this.x, 0.4, {scale: 2} ) TweenMax.to(this.y, 2, {scale: 2} ) good TweenMax.to(this, 0.4, {x:400} ) TweenMax.to(this, 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 } TweenLite.to("h1", 1, {x:100, onComplete:tweenScope}); TweenLite.to("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="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> As long as you can edit html on your site you should be able to put this on your page <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script> TweenMax.to("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 https://greensock.com/position-parameter What you are doing as tl.to(something, 1, {x:200, delay:-1}) should be tl.to(something, 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. https://greensock.com/blog/ 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 https://greensock.com/docs/Plugins/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: https://greensock.com/position-parameter
  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.
  16. Carl

    Reverse Function Not Working As Expected

    Hi and welcome to the GreenSock forums. Thanks for the demo. The biggest problem is that you create a new timeline on every click. Please see the console logs in this demo: If the menu is already open, there is no need for a new timeline. You really want to reverse the timeline that was created on the previous click, not one that was just made. There are a few ways to go about this, but your end result needs to be that each menu has a reference to its own animation that it is in charge of playing or reversing. Probably the best approach to this setup is what @OSUblake does in this thread This version from @pointC may be a little easier to understand (you would have to change the interaction to be click-based of course) and a similar approach
  17. Carl

    Which default animation does TweenLite uses?

    You can convert bezier values to CustomEase. Please see the second video on this page: https://greensock.com/customease You should watch the whole thing, but the bezier value part is around 8:52 GreenSock doesn't use bezier values for eases natively as they are so limiting. With only 2 control points it's impossible to do elastic, bounce or more expressive eases. The first video on the page above should give you a better idea of how important it is to have more easing options.
  18. Carl

    Which default animation does TweenLite uses?

    It looks like you are just using the traditional Penner Eases. GreenSock's eases create the same results in a more optimized fashion and don't use the typical t,b,c,d parameters. The power eases with the numbers just make it easier to understand which eases are stronger than others. They are each mapped to one of the traditional curves. Power1 = Quad Power 2 = Cubic Power3 = Quart Power4 = Quint To match your easeInOutQuad just use GSAP's Quad.easeInOut or Power1.easeInOut the results will be virtually identical. GSAP also has access to Circ an Sine and of course proprietary eases. Please see the full list. https://greensock.com/docs/Easing
  19. Carl

    Which default animation does TweenLite uses?

    Not really sure what that means. What are you using for your other animations?
  20. Carl

    Which default animation does TweenLite uses?

    Yup, the default ease is Power1.easeOut which makes objects slow down a bit as they come to their final resting position (as they would in real life). https://greensock.com/docs/TweenLite/static.defaultEase if you want another as the default just use: TweenLite.defaultEase = whateverEaseYouWant or in your tween you can do: var g_1 = TweenLite.to('#path', 0.5, { attr:{d: getPath('M2.6 2.8 L 96.3 4.8 L 98.5 98.4 L 0 100 Z')}, ease:Linear.easeNone });
  21. Came across some cool HTML5 banner ads while doing some casual browsing and figured I share them: Verizon Fios (GSAP): https://s0.2mdn.net/3950987/1441292307159/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600.html Jeep (GSAP + EaselJS): http://s0.2mdn.net/ads/richmedia/studio/pv2/38170525/20150831144144032/ Muppets (GSAP): https://s0.2mdn.net/4139733/1440792288892/300x600_MPT_Muppets_LightRB_HTML5_Sept22.html Google Music (GSAP + SVG) https://s1.2mdn.net/ads/richmedia/studio/pv2/37557754/20150731072517615/ Do you have any HTML5 GSAP ads to share? We would love to see them
  22. Carl

    Issue with stepped ease on repeat

    not seeing any issues in FireFox either: https://greensock.d.pr/6WzrCl
  23. Great work, Joe. Very slick.
  24. Carl

    Issue with stepped ease on repeat

    hmm, I don't see any issue on repeat. the animation plays the same each time. spritesheet moves left to right, beam comes in over and over and over https://greensock.d.pr/uq4TDo Is there something I'm missing? Also, when GreenSock requested a CodePen demo, this is what he meant: Much better than a zip.
  25. Carl

    Combo of Spine, Pixi and GSAP

    Sorry, I'm not really familiar with Spine. However, if you can wire up a very basic Spine demo &nbsp;using CodePen, and explain exactly what it is you want to animate perhaps one of us can give you some pointers. The good news is that GSAP can animate any numeric property of any object. So if Spine objects have numbers... chances are GSAP can animate them.