Changing / animating different div's using scrollorama

Question

Im currently exploring the scrollorama jquery plugin (http://johnpolacek.github.io/scrollorama/)

So far so good, it's a good plugin but it doesnt satisfy my exact needs. Since this is my idea: When the visitor scrolls to a certain div (lets say we got the next value's: blockIndex = 1), I want the top-bar to animate. But all I can really find with the scrollorama is to make stuff happen that are located in the div we just scrolled to.

I thought I had an easy fix (where var I = the current blockindex number) by writing: if (i != '1') { $( ".top" ).animate({opacity: 0.25,left: "+=50",height: "toggle"}, 5000, function() {}); };

It shows no result nor I found any solution on the internet. So what am I basicly searching for? A solution with or without scrollorama (would be great with) that I can track current bloxindex number and animate other elements within the website with it.

Im not exactly sure if that works, but I hope to find an answer!

Cheers,

Rick

Answer 1

Hey Rick I ran into this same problem and there is an easy way around this but it isn't scrollorama issue. I would also recommend using http://johnpolacek.github.io/superscrollorama/ instead as it is slightly more updated.

Greensock for better or worse limits your scope of your jquery actions to the scope of the $this parameter being used for the animation to prevent issues. There is a way around that by setting the scope of you functions that you are calling.

I worked around this by setting the scope of my jquery this element to a different part of the page. In my example i used the same place as I was tweening but in practice you can set the scope to be any valid jquery selector. You need to make sure you are using the most updated greensock plugins. Additional documentation can be found at http://api.greensock.com/js/

var timeLine1 = new TimelineLite({align: "sequence"})
.append([TweenMax.to($('#display-platform-list .frame-1'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-1')})])
.append([TweenMax.to($('#display-platform-list .frame-2'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-2')})])
.append([TweenMax.to($('#display-platform-list .frame-3'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-3')})])
.append([TweenMax.to($('#display-platform-list .frame-4'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-4')})])
.append([TweenMax.to($('#display-platform-list .frame-5'), 2, {css:{display:'block'},onUpdate:removeSiblings,onUpdateScope:$('#display-platform-list .frame-5')})])
.append([TweenMax.fromTo( $('#platform .callout'), 1, {css:{opacity: 1}}, {css:{opacity: 0}})]);

function removeSiblings(){
    $(this).siblings().hide();
}