Carl last won the day on June 20

Carl had the most liked content!


  • Content count

  • Joined

  • Last visited

  • Days Won


Carl last won the day on June 20

Carl had the most liked content!

Community Reputation

5,934 Superhero


About Carl

Profile Information

  • Gender
    Not Telling
  1. i suspect if you iterated through the objects in b in a positive manner by incrementing i in your loop (i++) instead of (i--) you would have things animate in the right order. Very tough to say though by just seeing the code you supplied. CodePens or other demos in a live and editable environment are much better for us to work with.
  2. x and y are GSAP aliases for translateX and translateY which are transforms. top and left are position values and GSAP doesn't substitute x and y for those. Check out the video on the Getting Started page: You'll see in the beginning that we show how to use dev tools to inspect elements while they are animating. This is a great technique for seeing what GSAP does "behind the scenes".
  3. Yes, GSAP will automatically do its best to get the most out of matrix3d() transforms even for 2D transforms. Please read about force3D in the CSSPlugin docs.
  4. it sounds like you would need a timeline that you play and reverse on mouseenter / mouseleave. Something like this: To change the timing of each animation be sure to study the position parameter
  5. 1) Yes, I'm creating a CustomEase 2) I am using the getRatio() function to figure out the x value based on the current index / numBoxes. This code is in a loop so index gets incremented on each iteration. 3) I provided code above in the demo showing how to use this value as the delay for each tween in a staggerTo(). The stagger amount is a fixed value that gets applied equally for each tween generated by the staggerTo(). By using it as the delay I can use the cycle property to update the delay for each tween individually. Here is a fork that shows it working:
  6. You could change the duration by changing the 30 into 60. Once the tween is created you can change the duration() or timeScale() but you need to create a reference to the tween like: var t ='.topics',30,{x:-topics.offsetWidth,repeat:-1,ease:Linear.easeNone}); t.timeScale(0.5) //or //t.duration(60);
  7. hmm, this seems to be very similar to your post from a few days ago. It would be helpful if you would respond to the answers you receive so that we know whether or not the issues are resolved. Maybe double-check that your notifications are configured so that you receive emails when your threads get responses.
  8. this is quite strange and looks like a bug in Animate. If you force your clip to gotoAndStop(0) before the stagger or place your code on frame 2 in the timeline it works. With a single frame I did: console.log(this.boxes.children); this.boxes.alpha = 0.5; this.boxes.gotoAndStop(0) TweenMax.staggerTo(this.boxes.children, 1, {scaleX:2, scaleY:3}, 0.5); //this.boxes.box1.scaleX = 4 this.stop(); attached is my fla
  9. I don't have access to Animate at the moment (machine rebuild) but I remember some issues with addChild and child-related methods on the first frame of the timeline. Just as a test make sure this.myClip.children is something an not undefined. Try adding the following line immediately before the animation code: console.log(this.myClip.children) if you get "undefined" try moving your code to the next frame.
  10. Timelines don't auto-shift their children when a child has its startTime() changed. When you are building your timeline you can use the recent() method to inspect the previously added child. In the following modification of your demo you can see that timelines are added relative to the duration of the previous child. In this case each new timeline gets added in the middle of the previous timeline tl.add(embed_tl_one); tl.add(embed_tl_two, "-=" + tl.recent().duration()/2); tl.add(embed_tl_three, "-=" + tl.recent().duration()/2); If you decide to change the startTime() of a child animation and then want to shift other children you can use shiftChildren() Also, getChildren() is very powerful and allows you to loop through any child, inspect it, and modify it.
  11. The short answer is, yes! This isn't necessarily a single feature, but a combination of tricks that will get you what you need (i think). My solution hinges on CustomEase which allows you to use any SVG <path> as an ease curve. Read the CustomEase page for all you need to know about easing and CustomEase. The reasons I am tapping into CustomEase are 2-fold. CustomEase allows you to draw any curve you want (assuming it doesn't cross over itself) All eases have a getRatio() method which gives you a value based on progress For my example I created a custom ease that looks like this: EDIT curve here:"M0,0 C0.083,0.294 0.214,0.596 0.468,0.82 0.588,0.926 0.752,1 1,1" I wrote some code that uses that ease curve to plot the x coordinate of 50 boxes that are stacked vertically I basically loop through each ".box" and use getRatio(index/numBoxes) to get a value between 0 and 1. I multiply that value by 250px so that the boxes actually move more than 1 pixel var curve = CustomEase.create("curve", "M0,0,C0.083,0.294,0.214,0.596,0.468,0.82,0.588,0.926,0.752,1,1,1"); var numBoxes = $(".box").length; $(".box").each(function(index, element){ TweenLite.set(element, {x:curve.getRatio(index/numBoxes) * 250}) } ) Since I'm modifying the x (horizontal) of the boxes you will have to tilt your head 90 degrees to the right to see how the curve matches the ease curve Now that I know that I can get a value along a path, I'm going to use the same technique to use that value for the absolute position (start time) of tweens in a timeline: $(".box").each(function(index, element){, 1, {x:500, ease:Linear.easeNone}, curve.getRatio(index/numBoxes) * 4); } ) You should be able to see that the startTimes of the boxes towards the bottom (end of animation) are much closer together just as the ease curve flattens out at the end. That pen has a block of code commented out showing that you could cycle the delay property of tweens in a staggerTo() but I find the loop easier to digest in this case tl.staggerTo(".box", 1, {x:500, ease:Linear.easeNone, cycle:{ delay:function(index){ return curve.getRatio(index/numBoxes) * 4 } }}, 0) Hopefully this gets you on the right path.
  12. Hi Alex, Thanks for sharing the positive report!
  13. Hey Blake, Thanks for checking my sanity;) lol, forgetting about the modifiersPlugin demo is definitely within the realm of possibility. I did start down that path, but in my haste got tripped over how to handle the negative range with modulo stuff (i just re-found your wrap function, which I'm sure would have helped). Additionally, I was hung up on how to handle the opacity change with that solution. The path I took ended up being the one with least mental resistance at the time. If you want to take a stab at a simple or more advanced (3d) approach please share. You can't tease us like this;) C
  14. Thanks, Craig. I had to do something to up my game once @OSUblake started creating "6-part tutorials as answers"