Jump to content
Search Community

onedesign

Premium

  • Posts

    17

  • Joined

  • Last visited

 Content Type 

Posts posted by onedesign

    ScrollTrigger Animations Jump When Scrolling Back Up After Page Loads Below Pin

    in GSAP

    Posted

    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!

    See the Pen 630fe7fcd00fc2a64527a6ce5c369050 by itsmattsoria-odc (@itsmattsoria-odc) on CodePen

    How to handle situation where more than one "onUpdate" callback is required.

    in GSAP

    Posted

    As posted here before, I've created a javascript utility called Anim Panel () 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!

    See the Pen rLQxaY by cmalven (@cmalven) on CodePen

    Interrupting a tween resulting in inaccurate state earlier in timeline

    in GSAP

    Posted

    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!

    See the Pen 564325ad1c25eb0ef02c2b41a14fc7ef by cmalven (@cmalven) on CodePen

    Confusion over "set" with multiple composed timelines

    in GSAP

    Posted

    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.

    • Like 2

    Confusion over "set" with multiple composed timelines

    in GSAP

    Posted

    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?

     

     

    See the Pen zNELLL by cmalven (@cmalven) on CodePen

    AnimPanel: a UI panel for working with TimelineLite/Max animations

    in GSAP

    Posted

    We released this awhile ago, but didn't think to post a link to these forums, the place where the people it can help are the most likely to find it!

     

    As the One Design Company team have worked on longer and more complicated timeline animations with TimelineLite and TimelineMax over the years, we started to piece together a toolkit for easier review and tweaking. Recently we released this tool to the public as open source.

     

    AnimPanel demo on CodePen

     

    AnimPanel on Github

     

    Here are a few of the ways it can help:

     

    • Play, Pause, and Restart buttons
    • A visual playback scrubber
    • Buttons to dynamically change the playback speed (1x, 0.5x, 0.2x, etc)
    • A display of the current timeline time
    • For TimelineMax timelines, automatically-added buttons to jump to each label in the timeline
    • The ability to easily set custom loop in and out times for focusing on a specific span of the overall timeline, including making these in/out points persistent between page refreshes

     

    Please check it out, and if you have any issues or feature requests please toss an issue into the Github repo. Hope you find it useful!

    See the Pen rLQxaY by cmalven (@cmalven) on CodePen

    • Like 3
×
×
  • Create New...