Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by folktrash

  1. 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?
  2. 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.
  3. I've found the set() height to auto and tween from. Trying that now...
  4. 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?
  5. Adding externals: { 'TweenLite': 'TweenLite' } Resolved the issue.
  6. 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?
  7. 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.
  8. Hmm, I can't embed the result directly. Doesn't seem to work tho: http://codepen.io/folktrash/pen/qOaLax
  9. What I get is an array of objects, and not the tween instance. This is the case when I "new" it also.