walltea

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, repeat: -1}); tween.time(startFrame); smoke.tweens.push(tween); }) _tl.play(); } } I store all the TweenMax to an array so I can loop through them and pause/play them later.

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 animate. Now, what I would really like to do is have them all start at different background offsets, so the animations do not look similar. I have tried to do things such as "time: startFrame" (where startFrame is a randomized number), in the TweenMax.to, but this does nothing. Is there a different attribute I can set to achieve this? I have only been able to achieve the randomization by doing the following: $('.smoke').each(function(){ var frameWidth = 22, numCols = 16 * 6; var steppedEase = new SteppedEase(numCols); var startFrame = random(0, 2, 0.1); var tween = TweenMax.to($(this), 2, {backgroundPosition: '-'+(frameWidth*numCols)+'px 0px', ease:steppedEase, repeat: -1}); tween.time(startFrame); }); This works wonderfully well at starting all the animations from different, random points. However, I have been unable to add this to my timeline at all. _tl.add(tween) only animates the first of the tweens. Again if there is a way to add a random start time to _tl.add(TweenMax.to(...)), that will probably fix the problem. Lastly, I would LOVE to be able to randomly fade in these divs on initial page load, staggered, but I have no idea how to combine all these requirements in to the tween I need. Sorry for the verbose list of needs. I'm relatively new to TweenMax and have been struggling to get this working all day. Thanks in advance.

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?

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.

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!

Even with the correct syntax TweenLite.set(element, {vars}); I still get an unexpected string error. I'll try again in a few.

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?

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 start, the CSS (dependent on media queries is called) is pulled in by GSAP. For example: #home-art { background: url(../images/ui/sections/home/art.png); width: 1327px; height: 769px; position: absolute; left: 0; } @media (max-width: 1780px) { #home-art { left: -200px; } } @media (max-width: 1350px) { #home-art { left: -350px; } } So for example, the page is loaded with a window between 1350px and 1780px. #home-art will become left: -200px. If I resize the page to between 1000px and 1350px and I use a $(window).on('resize') event, like this: $(window).resize(function(){ var ww = $(window).width(), ha = $('#home-art'); if(ww < 1350) ha.css('left', '-350px'); if(ww < 1780 && ww >= 1350) ha.css('left', '-200px'); }) The left is set to -350px via javascript and all is well. The PROBLEM, however, occurs if I change sections, and then go back to the home section (meaning I am replaying the animation). GSAP still thinks that the #home-art offset is still -200px and animates to that, when it should be -350px, now (based on media-query or javascript). I guess real question is. If my animations are defined on load, how do I repopulate the {css:{left: x}} offset in real time? Defer the home animation initialization and have it define on resize? Or is there a way for me to modify this value in GSAP on the fly?

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 correct CSS offset and animates the element in via: animations.homeSection.from("#home-art", 0.75, {css:{opacity:0, left: -100}}, "homeart") The problem is, when this animation is initialized on page load, it grabs that CSS and sets it on the element in-line. Now if I resize the browser window, the element does not respond to the media queries and things overlap. I was trying to do some window.onresize things but have been largely unsuccessful at this point. If I manually set the css:left property of the element based on window sizing inside of a window onresize, when the page is reanimated, it reverts to the originally calculated position by GSAP. Is there any way around this? Thanks ahead of time.