Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About walltea

  • Rank

Recent Profile Visitors

1,631 profile views
  1. So, I found a solution. It's a bit crude, but for future people wondering similar, this is what I ended up doing: var smoke = { tweens: [], animate: function() { var _tl = new TimelineMax({paused: true, stagger: 0.5}), frameWidth = 22, numCols = 16 * 6; $('.smoke').each(function(){ var steppedEase = new SteppedEase(numCols), startFrame = random(0, 2, 0.1), delay = random(0, 4, 0.1); _tl.add(TweenMax.staggerFrom($(this), 1, {css:{opacity: 0}}), delay); var tween = TweenMax.to($(this), 4, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase,
  2. Hi there, I'm running in to some problems when trying to combine some animations in to a timeline, so maybe you can help. I have 5 divs with the class of 'smoke' that I want to make in to sprites using SteppedEase: var _tl = new TimelineMax({paused: true}); _tl.add('start'); $('.smoke').each(function(){ var frameWidth = 22, numCols = 16 * 6; var steppedEase = new SteppedEase(numCols); _tl.add(TweenMax.to($(this), 2, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat: -1}), 'start'); }); _tl.play(); This works great for getting the five divs to an
  3. Yeah, I guess that would be the easiest route. I would then just use the code from above: function animateSmoke() { var frameWidth = 22, numCols = 16 * 6; var steppedEase = new SteppedEase(numCols); TweenMax.to('.smoke', 1, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat:-1}); } My next question would be then, how would I start the animation on a random frame and continue through the loop?
  4. Unfortunately that's with one row of sprites (all frames are in a single linear progression). You can alternatively do that with a syntax like: var frameWidth = 22, numCols = 16; var steppedEase = new SteppedEase(numCols); TweenMax.to('selector', 1, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat:-1}); My problem arises for sprite sheets with multiple rows, like the one originally attached. I need a way to animate frames 1-4 from row 1, then step to row 2 and animate frames 1-4, then loop.
  5. Hi there, I was wondering if there was a way to used SteppedEase to animate a DOM element with a background image as a sprite where the background image has multiple rows of frames. See attachment for example. Ideally for the attached example I'd like it to animate row 1 from frames 1-4, then row 2 from frames 1-4, then reset and repeat. Is this possible with SteppedEase? If so can someone point me in the right direction? Thanks!
  6. Even with the correct syntax TweenLite.set(element, {vars}); I still get an unexpected string error. I'll try again in a few.
  7. Thanks for the responses. I'll start playing with these options. I am getting an "Uncaught SyntaxError: Unexpected string" if I try to use: TweenMax.set("#home-art",1,{'left','-350px'}); however. Any idea why?
  8. I'm not sure this will achieve anything. Let me give you some code as an example. $(function(){ app.init(); }); var app = new App(); function App() { var animations = { homeSection = new TimelineMax({paused: true}); } function _initAnimations() { animations.homeSection.from("#home .background", 1, {css:{opacity:0}}) .from("#home-art", 0.75, {css:{opacity:0, left: -100}}, "homeart") } this.init = function() { _initAnimations(); } } This is the basic setup of my App. My problem is, when _initAnimations() fires on page sta
  9. Hi there, I'm new to GSAP. I'm doing my first build with it and am loving it. I am running in to a bit of a problem in regards to element placement and where they are defined with media queries. My app defines its animations and initializes them all on page load. This is working wonderfully for all my animations with the exception of the home page. The problem with this animation is I am currently using media queries to position an element based on browser viewport size, so certain elements don't overlap, etc. This works fine when the page is loaded for the first time. GSAP grabs the