Faction Ryan

It appears the kill() method does not work either.

Rodrigo has the problem exactly. I've tried using Isotope's reLayout() and updateSortData() methods but, as Rodrigo states, Isotope is behaving as expected. If I can remove the DOM elements and "reset" them I think that would solve the problem. I'm assuming using the kill() method would accomplish this. I'll give it a go and report back. Thanks to everyone for continuing to lend a hand!

I did try adding those lines -- they successfully prevent the elements from being re-animated back in (step 3 of my previous post) -- but Isotope still thinks they take up space, so there are empty gaps where the hidden tiles are, instead of the filtered tiles being nicely stacked near each other. I'm not looking for an answer to this anymore as I think it's mostly an Isotope issue, and a difficult to reproduce bug. Thanks anyway!

Thanks to you both for your answers. Unfortunately, my situation is more complicated than my small code snippet let on. I encourage you to visit factionmedia.com to see the problem in action. To replicate, follow these steps: Scroll to the "Work" section, and filter on "Media" Scroll back to the top (don't click the links on the left; just scroll to the top) Scroll back down to the work section (again, without clicking the left side links) You'll see that all of the isotopes animate in, including the ones that were filtered out. The timeline that controls the animation is set on document ready, and not on click of the filter. I'm able to reset the isotope filter when a user clicks one of the lefthand nav items, but I'm not sure how to reset the filter (or clear out the timeline) when a user just scrolls. Rodrigo, your solution made the most sense, but I was unable to get it to work properly. I used the timeline.clear() method, then added the elements with the filter callback (as you suggested), but that resulted in some really funky behavior. I just wanted to let you both know I appreciate your feedback, and that I'm not sure there is a solution to this admittedly esoteric bug. Ryan

I'm using TweenMax in conjunction with the jQuery Isotope plugin. Isotope lets you filter by clicking an anchor element. Elements that are filtered out get a class of "isotope-hidden". This class does not exist when the page is rendered, and is added after the fact, when a user clicks a filter. I currently have this code: jQuery( '.isotope' ).not( '.isotope-hidden' ).each( function() { timeline.add( TweenMax.staggerFrom( .... ) ); } ); I'm using TweenMax in conjunction with the Super Scrollorama plugin, so that when users scroll up and down the page, the animations are played out and reversed, respectively. I've discovered that if a user scrolls down the page, filters out some isotopes, scrolls back up, then scrolls back down to the isotope section, all of the isotopes are animated in, including the ones that should be hidden. I've determined that this is because TweenMax is acting as expected: it does not know that I have elements with the class "isotope-hidden", so it doesn't ignore these. It would be ideal if there were a "live" method, as in jQuery, that would act on elements that are modified after the DOM is loaded. I didn't see anything like this in the docs. In short, is there a way to get TweenMax to "recognize" these elements, which are given the class "isotope-hidden" dynamically? Thanks!

Hi Jack, I'm working with this plugin to animate some :before and :after borders, and am having trouble getting the plugin to work on a specific element that had a class applied dynamically with jQuery. My situation is this: I have a gallery of photos. Clicking on a photo should animate just that photo's container (which has the :before and :after pseudo elements). I'm able to animate all photo containers at once, but not just the container clicked. I get the error Uncaught TypeError: Cannot call method 'split' of undefined. Here is my code: $( '.hexagon' ).click( function() { var hexAnimation = new TimelineLite(); var hexagon = $( this ); hexagon.addClass('onhex'); var hexBeforeCSS = CSSRulePlugin.getRule( '.onhex:before' ); var hexAfterCSS = CSSRulePlugin.getRule( '.onhex:after' ); TweenLite.to( hexBeforeCSS, 3, { cssRule: { ... } } ); TweenLite.to( hexAfterCSS, 3, { cssRule: { ... } } ); hexAnimation.add( TweenMax.to( $( this ), 3, { ...tween... } ) ); } ) I also tried adding the .onhex pseudo elements to my CSS file, but doing so makes the borders snap to the end dimensions immediately, skipping the animation. Here is an example of what's happening: http://staging.factionmedia.com/fmwebsite/about/ Bottom line: I don't know how to target just one element and wonder if you can help. Thanks!

Thank you both for your detailed and thoughtful answers. I appreciate you taking the time to create working examples! Bassta, your Fiddle was exactly what I needed. Rodrigo, your Codepen introduced me to AutoAlpha, which prevented me from asking a follow up -- how do I hide the animations until they are ready? Things are working great now, thanks!

I'm new to GSAP and really like it so far. I have one challenge that I think could be easily solved by SplitText, but unfortunately my company isn't interested in going the membership route. Is there an alternative to achieving the same thing? I have a parent element with a header and a variable amount of paragraphs. I'd like to animate the header, then each paragraph in turn. That is, once the first paragraph is finished animating, the second paragraph starts animating. When the 2nd paragraph is finished, the 3rd starts animating, and so on. Here is some sample HTML: <article> <h1>My header</h1> <p>First paragraph</p> <p>Second paragraph</p> </article> Does GSAP have an equivalent of jQuery's $.each() function, such that I could call the same animation on an element with a class, like: $( 'article p' ).each( function() { tl.from( $( this ), 1.5, { rotationX : -90, transformOrigin : 'left top', ease : Elastic.easeInOut } ); } ) That's just pseudo code to convey my idea. I realize it won't work Thanks in advance for any help!