Jump to content
Search Community

onedesign

Premium
  • Posts

    17
  • Joined

  • Last visited

About onedesign

  1. Wow, yeah, I apparently was way over-engineering this. This looks way cleaner and more efficient. I'll give this a try. Thank you for your help!
  2. I have some ScrollTriggers added to a few elements in a pinned ScrollTrigger, and when the page is loaded from the top, the behavior is exactly how I want it, even when scrolling back up through the pinned section—the animations just play in reverse of how they played when scrolling forward, but if you load the page below the pinned section, in the normal context of the site, if a person was given an anchor link below the pinned section, or refreshed the page after scrolling past the pinned section, and *then* you scroll back up through the pinned section, the animations still trigger at the right place, but they sort of skip the tween and just jump to the start/end value. In the codepen demo, you can set the `loadAtBottom` var at the top of the js panel to `true` to try to simulate this. I know that's not a perfect simulation, but the result is the same as I'm experiencing on the actual site. I'm afraid that the issue isn't an issue at all—that this is how it should be happening, but I'm misunderstanding something fundamental about how scrolltriggers work, but any insight or guidance would be greatly appreciated!
  3. Thanks, Greensock. I'll give that last one a shot and see if I run into any gotcha's. Otherwise, seems like it might be a pretty bulletproof approach.
  4. Thanks, Greensock. Correct if I'm wrong, but with your alternative approach, that would only work if the user created the `onUpdate` callback before Anim Panel was initiated. Otherwise, their custom callback would overwrite Anim Panel's `onUpdate`, right?
  5. Hey Carl, This is smart, easy to implement, and seems to work well. Thanks for the assist!
  6. As posted here before, I've created a javascript utility called Anim Panel (http://codepen.io/cmalven/pen/rLQxaY) to make previewing and editing Greensock timeline animations easier. Anim Panel currently makes use of an `onUpdate` event callback on the passed-in timeline to update the scrubber, current time, etc. Obviously, this poses a problem when the user wants to add their own custom `onUpdate` callback to the timeline, as each timeline is only allowed to have one callback for each type. Any suggestions on how to get around this? Is there an alternate method of hooking into the timeline for updates that won't interfere with a user adding custom update callbacks? Top priority is convenience for the user, so would prefer something that doesn't require them to have knowledge of how Anim Panel works internally. Thanks!
  7. I think I found an answer in the docs that I missed on the first pass. overwrite: 'none' Is that a logical way to handle this situation?
  8. I'm working on a large animation right now, and I'm experiencing a recurring issue where interrupting the progress of a tween results in an odd state for the element when the timeline is scrubbed back or repeated. In the attached CodePen, for instance, we tween the alpha of an element from 0 to 1, but then halfway through we interrupt that tween with another to change the alpha to zero. The whole thing plays correctly the first time, but on subsequent plays the alpha of the element starts at nearly full on the first frame of the timeline. Is there something special I need to do when interrupting tweens in this way? Thanks!
  9. Thanks, GreenSock. The behavior you're describing does make sense (and already mostly made sense even before posting this) I was mostly looking for some guidance on how to accomplish this in an elegant way that didn't require doing anything gross with my code. Your idea of just using TweenLite.set() as simple as it is, is exactly what I need to do here. Works like a charm.
  10. Thanks for the reference, PointC I've created a new CodePen though following Carl's advice in that thread, and no dice. Still doesn't seem to accomplish the behavior I'm looking for. Can you see anything wrong with this code? http://codepen.io/cmalven/pen/JEraLd
  11. I'll add that I generally get what is going on here: that the `.set()` is firing as soon as the timeline playhead gets to the point in the timeline where those sets occur. What I don't understand is why the behavior is different the first time the animation plays.
  12. I'm running up against an issue that I've noticed before, but always hacked around rather than really figuring out what is going on, but this time it's a little more challenging to find a workaround that doesn't make my code significantly worse, so I thought I'd ask about it here. It's pretty common for me to create one big timeline by composing together multiple smaller timelines. For example (or check out the attached codepen): var createFooTimeline = function() { var fooTl = new TimelineMax(); … return fooTl; }; var createBarTimeline = function() { var barTl = new TimelineMax(); … return barTl; }; var fullTl = new TimelineMax() .add(createFooTimeline()) .add(createBarTimeline()); However, if any of those generated timelines uses `.set()` to set the initial state of any elements, that `set()` seems to only occur the first time the sub-timeline is played. Any subsequent plays (typically by jumping back to the beginning of the timeline) the elements won't be set and the timeline behavior will be odd. This makes it very difficult to compose multiple timelines in this way, because it means you can't keep the `.set()` for these elements where it makes the most sense, with the creation of the sub-timeline. Can anybody help illuminate this for me?
  13. Thanks, GreenSock! Tested in the following: iOS 8.4 - Vertical device scrolling works now. Horizontal swiping doesn’t. iOS 9.3 - Horizontal swiping works still works. - Vertical device scrolling works now. iOS 10.0 - Horizontal swiping works still works. - Vertical device scrolling works now.
×
×
  • Create New...