Jump to content

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

Carl last won the day on April 4 2019

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. 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!
  2. 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.
  3. 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:
  4. 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.
  5. 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.
  6. 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})
  7. 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
  8. 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.
  9. 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
  10. 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.
  11. 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
  12. Not really sure what that means. What are you using for your other animations?
  13. 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 });
  14. not seeing any issues in FireFox either: https://greensock.d.pr/6WzrCl
  15. 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.
  16. Sorry, I'm not really familiar with Spine. However, if you can wire up a very basic Spine demo  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.
  17. yeah, as Shaun mentioned a demo really helps. It sounds like you could use tweenTo(): https://greensock.com/docs/TimelineMax/tweenTo() which allow you to scrub the playhead of a timeline to any time you want (forwards or backwards at whatever duration you want) var TimelineOne = new TimelineMax({paused: true}); TimelineOne.fromTo(".AnimBox", 4, {y: 0, opacity:.5, rotation: 0}, {y: -100, opacity:1, rotation: 45}); var TimelineMaster = new TimelineMax({}); //tween TimelineOne forward to it end time of 4 seconds at normal speed (4 seconds) TimelineMaster.add(TimelineOne.tweenTo(TimelineOne.duration())) .to("body", 1, {backgroundColor:"black"}) //tween TimelineOne back to a time of 0 with a duration of only 1 second .add(TimelineOne.tweenTo(0).duration(1))
  18. Child animations are rendered based on the position of the parent timeline's playhead. Even though you are restarting the child timeline (blue) the parent's playhead isn't moving... its still at the end of the timeline. However, if you set smoothChildSmoothing to true then you can get the behavior you want smoothChildTiming docs: https://greensock.com/docs/TimelineMax/smoothChildTiming
  19. if you comment out line 97 it seems to work as expected scrollStop(function () { // action.timeScale(1).play(); }); not sure why you are resetting timeScale(1) like that.
  20. you are using pixi.js so you need to set that in the app settings like: var app = new PIXI.Application( { view: document.querySelector("#canvas"), backgroundColor:0xff0000 });
  21. Hi and welcome to the GreenSock forums, Thanks for the demo. Instead of recreating the tween with different end values for x on each scroll I think you will be better off just creating the tween once and changing its timeScale() timeScale() allows you to adjust the speed of an animation animation.timeScale(0.5) // half speed animation.timeScale(1) // normal speed animation.timeScale(2) // double speed The demo below shows how you can smoothly adjust the timeScale of a timeline using an html5 input slider. You can normalize your scroll position values and pass them into the timeScale of your tween
  22. Carl

    wave on image

    That site is using <canvas> and most likely some sort of displacement map animation. Please see this demo from @OSUblake (OPEN IN FIREFOX and mouseover image) you can get similar effects with SVG too:
  23. hmm, this code is a bit unorthodox. Not sure why you are calling from() on tlSub and using that inside an add() for tlMain. Please try this for( var i = 0; i < chartContainer.length; i++ ) { tlSub.from(pathObject['pathElem'][i], pathObject['pathTiming'][i], {drawSVG: 0}, 0); } that will put all the tweens inside tlSub at a time of 0. If tlSub needs to be nested in tlMain, then after the loop you can do tlMain.add(tlSub) In the future, please consider making a demo. It will help us better understand what you are trying to do and provide accurate solutions. thanks
  24. please don't post private pens. we can't fork them. is there a reason you don't just restart() the timeline? Please try this code const btn = document.querySelector('.js-play') const split = new SplitText('.js-typewriter', { type: 'lines, words, chars' }) let tl = new TimelineLite({ paused: true }) tl.staggerFrom(split.chars, 0.1, { width: 0, alpha: 0, ease: SteppedEase.config(1) }, 0.1) function animate() { tl.restart(); } btn.addEventListener('click', animate) also, the TextPlugin basically does all that for you with even less code: