Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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 <a href="http://johnpolacek.github.io/superscrollorama/" rel="nofollow">http://johnpolacek.github.io/superscrollorama/</a> instead as it is slightly more updated.</p> <p>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.</p> <p>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 <a href="http://api.greensock.com/js/" rel="nofollow">http://api.greensock.com/js/</a></p> <pre><code>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(); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload