Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

8 Newbie

About Gary

  • Rank
    Advanced Member

Recent Profile Visitors

2,737 profile views
  1. Jonathan, thanks for the info and the example! It would require a significant refactoring of ProStyle to support that and would circumvent the intrinsic layering. I'm content with ProStyle not supporting 3D on IE (unless Microsoft every gets around to adding preserve-3d) especially since the majority of Windows users are moving to Edge. Thanks, Gary
  2. Yep, when it comes to 3D, IE just doesn't support it. You can do a bunch of complex math to try and emulate it on a 2D plane, or choose a much better browser. Luckily, Microsoft is moving most of their users to Edge, which does support 3D.
  3. Bummer. I definitely understand the position, as you describe it, though. Thanks, Jack.
  4. You can lay the sides out in 3D space, translating on the Z and setting the transform origin to rotate them into place. Then just rotate the outer div. Here's an example using ProStyle. It's resizeable with trackbar. http://codepen.io/garyc/pen/KdaewM?editors=101
  5. Any chance transformOrigin tweening will be added to an upcoming release? I have a bunch of uses for that if it were added. The attached codepen is an example. I wanted to rotate and move the phone simultaneously but couldn't. To do that I would need to animate the position, rotation, and transformOrigin of the image at the same time. Here's another example. I'd really like to Greensock-ize something like this, but that also requires animating the transform origin.
  6. http://codepen.io/garyc/pen/OyWbpy?editors=101
  7. Works great so far. Thanks, Carl !!! I'll be putting a much more elaborate demo on codepen shortly.
  8. While attempting to set a gradient on the body tag I noticed some weird behavior. If I set a background radial gradient on a div, it works. If I set it on the body, it doesn't. If I set it on both, in an array, it works for both or neither depending on the order within the array. In the codepen, uncomment each of the TweenMax.set() lines in turn, one at a time.
  9. I'm not sure how I could incorporate something like that into ProStyle. It supports an arbitrary number of nested timelines and the duration of the parent timelines are a function of the durations of the children. See https://prostyle.io/concepts/#animation The user can seek anywhere from 0..x on the main timeline and all children are moved to a deterministic position. The codepen that I included has just one set of text but there could be other things being animated. A helper parameter would make it much simpler than callbacks (similar to how yoyo simplifies). I imagine the stagger
  10. Clever! I think I can get it to work with this approach. Thanks. (still might be a nice feature to have a variation of yoyo to simplify it)
  11. The yoyo attribute (and method) makes it simple to repeat something back and forth many times. Naturally, the ease is played in reverse every other leg. I’d love to be able to optionally disable that and have it play the ease forward regardless of the yoyo direction. This can be done in JS by duplicating and tweaking what yoyo does internally, but it's very nice having the convenience method. Yoyo is a Boolean. Perhaps it could take a string to trigger this. { yoyo: “easeForward” }
  12. Thanks for the response, Diaco. I can't use repeat -1 in my ProStyle library because the tweens are added to an outer timeline that must have a measurable duration, since it uses controllers like the trackbar. Let me try to explain it better. Here's a fork of my original codepen that has the controllers setup to pause right away. http://codepen.io/garyc/pen/GpZeab?editors=101 Notice that none of the characters are rotated at position 0. It can never be like this in a seamlessly staggered loop. Similarly, if you click on the track bar at the end (position 6.04), no char
  13. Oh how I love GSAP’s staggering. It’s so simple, and yet so powerful. The one thing that I wish it could do, though, is seamless staggering. See the animation at http://codepen.io/garyc/pen/OyMmvB?editors=101 I had to add a bunch of repeating to have seamlessness between each iteration. However, eventually the repeating stops, after the last repeat. I know I could set repeat to -1 but that would mess up the outer timeline’s duration (see the trackbar). To get a better sense of what I am talking about, in the codepen, remove the repeat and yoyo in the charAction by changing t
  14. Yup, that helps. The object methods is really good to know. I don't need it yet, but it looks very useful. The hand-rolled loop is what I am doing now and it works great. I've been using D3.js a lot and have become a fan of the loop-less data interaction with modular data processing functions. For instance, random values like this would be trivial. function randomNumber(min, max){ return Math.floor(Math.random() * (1 + max - min) + min); } tl.to(divs, 5, {x:randomNumber.bind(0,100)}); Writing explicit loops works perfectly fine. The above approach is merely semantic sugar.
  15. Does GSAP have any intrinsic support for calling a function to get a vars value? Given an array of divs and an array of data, with one datum per div, it could look up a property value. For example: var data = [[20,50],[25,41],[22,10]]; function getX(index) { return data[index][0]; } function getY(index) { return data[index][1]; } tl.staggerTo(divs, 5, {left:getX, top:getY}, 1); I don't think it does, but thought it was worth asking. If not, might be a nice future enhancement.