animate elements individually #132

corradomatt opened this Issue Jan 20, 2014 · 2 comments

2 participants


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).


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.


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


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment