animate elements individually

[corradomatt]

Could find the solution to this issue here or with google...

I've been having trouble getting superscrollorama to work with each element individually. I have it working on a group (grid layout) of divs that all have the same css class applied and all of the elements animate together when I scroll to the middle of the group.

What I want to do is treat each element as an individual and animate them individually when their particular scroll position is reached (there will be a ton of elements on the page). Do I need to use pinned elements? I don't fully understand pinned elements even after reading through the documentation.

Here's what I've got and I thought that using jQuery.each would get me the effect I was looking for but no dice....

jQuery('.mark-disc').each(function() {
        controller.addTween('.mark-disc', TweenMax.from( jQuery(this), 1, {delay:Math.random()*0.2,css:{rotationX:-80,opacity:0}, ease:Back.easeOut} ) );
      });

Sorry, not a js expert (yet).

[corradomatt]

Figured it out....for my implementation I used the following...

var controller = jQuery.superscrollorama({
    reverse: false
});

controller.addTween('.mark-disc', TweenMax.from( jQuery( '.mark-disc' ), 1, {delay:Math.random()*0.2,css:{rotationX:-80,opacity:0}, ease:Back.easeOut} ));

jQuery('.mark-disc').each(function() {

    $this = jQuery( this );
    controller.addTween( $this, TweenMax.from( $this, 1, { delay: Math.random()*0.2, css: {rotationX:-80,opacity:0}, ease: Back.easeOut }, 0, -400 ) );
});

Everything works great now.

[janpaepke]

thanks for sharing and I apologize for the lack of support.
My ressources are pretty limited at the moment.

regards,
J