[Ways to approach changing durations.]

Hi!

 

I'm curious if there's a good way to manage changing durations. I don't have code snippet handy atm, but the situation is this: We have a series of animations/scene. There's the intro timeline, the waiting timeline, and the outro timeline. It's a loader scene.

 

The intro and outro are their own var'd new TimeLineMax(), with a series of tweens. These animations have static duration, e.g. the intro takes one second, and the outro takes 2 or whatnot.

 

The waiting timeline is a repeating series of .to()'s saved into a var'd timeline. The total time is variable based on bandwidth and filesize. I'd like to alter the duration the containing tweens (independently if possible), as the total wait time increases; Speeding up the repeating effect (reducing the duration) the longer we're waiting.

 

I can navigate an onComplete that checks some bool and restart()'s that timeline to "get" a repeating animation without using repeat explicitly. Related: is there an API for timeline.repeateUntilFurtherNotice()? I didn't see one (https://www.greensock.com/asdocs/com/greensock/TimelineMax.html#methodSummary).

 

Either way - what is a good approach for modding the duration of tweens inside a timeline when the total duration is variable/unknown?

[Sorting animation, and height on making visible...]

TL;DR: when implementing hide and show animation use-cases involving height going to 0: you'll need to switch to from() tweens on the show condition, which means you'll need to perform a set() of the properties you're "from'ing" right before you from() them. 

 

In my case, I was going to height:0, opacity:0, so on "show" I needed to set() opacity:1, height:1, and then from() height:0, opacity:0

 

While this may seem strange, it's less complicated than calc'ing heights of each items and animating to that specific value.

[Sorting animation, and height on making visible...]

I've found the set() height to auto and tween from. Trying that now...

[Sorting animation, and height on making visible...]

I've got a list of items. Filters are clickable that hide all but the items in that category with a sequence that fade opacity and height to 0. When showing all, items currently at opacity and height 0, fade in correctly, but height "pops" in immediately.

 

Am I missing something obvious here? Also, is there a more appropriate place to post than here? SO perhaps?

[Using webpack, TimelineMax has references to TweenLite?]

Adding

externals: {
    'TweenLite': 'TweenLite'
}

Resolved the issue.

[Using webpack, TimelineMax has references to TweenLite?]

Hmm, seems this is something to do with webpack. Weird that it's a reference to TweenLite and not TweenMax. Maybe they both register as TweenLite?

[Using webpack, TimelineMax has references to TweenLite?]

Using webpack to bundle, I import:

 

import TweenMax from 'javascripts/gsap/TweenMax.min';
import TimelineMax from 'javascripts/gsap/TimelineMax.min';

 

And at build time:

ERROR in ./src/javascripts/gsap/TimelineMax.min.js
Module not found: Error: Cannot resolve module 'TweenLite' in /Users/nvvaughn/Code/play/webpack-css-example/src/javascripts/gsap
 @ ./src/javascripts/gsap/TimelineMax.min.js 290:48-72

I just cloned the repo a two days ago. 

[Trying to call play() or restart() on a staggerFrom()]

sonuvva... it's always a typo. thanks OSUblake@!

[Trying to call play() or restart() on a staggerFrom()]

Hmm, I can't embed the result directly. Doesn't seem to work tho:

See the Pen qOaLax by folktrash (@folktrash) on CodePen

[Trying to call play() or restart() on a staggerFrom()]

What I get is an array of objects, and not the tween instance. This is the case when I "new" it also.

See the Pen jbMXPE by folktrash (@folktrash) on CodePen