Jump to content
Search Community
phsims test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,


I am currently working on a onepage parallax wordpress site for a client, he spotted a site that had a load of cool effects and wants them adding to his site.  That led me to superscrollorama which led me here.


I am trying to recreate some of the effects from the superscrollarama demo site on the the clients site.  I want to be able to use the same effect on numerous classes and have them trigger when they scroll into view and reverse when scrolling out of view (as they do on the demo site).  Unfortunately ALL of them trigger at the same time (when the first class comes into view) and they dont reverse out again.


Below is the code from the superscrollarama demo site

// individual element tween examples
controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));

controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}));

controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));

I am completely new to this, and am at a loss.  


Any help/advice would be much appriciated.



Link to comment
Share on other sites

Hi and welcome to the forums.


Do you have a live sample that we could look at?.


For the behaviour you describe it seems that all your elements have the same offset position (which is what triggers the animation start). In order to check where every element is at when the DOM is ready (I'll presume you're using document.ready) you could add this at your code:

var fadeEl = $("#fade-it"),
    flyEl = $("#fly-it"),
    spinEl = $("#spin-it"),
    positions = [fadeEl.offset().top,flyEl.offset().top,spinEl.offset().top,];

Like that you could see where every element is when the tweens are created and if the problems  is there or somewhere else.


Hope this helps,



Link to comment
Share on other sites

Hi and thanks for the response.


Sorry I dont have anything live yet, its all on my localhost.


I have set up the WP parallax theme so that the end user can choose the animation they want from a drop down.  The idea is that they can choose to make a title fade/spin etc and the correct class is then applied to the title.  That works fine but on single pages but on the onpage parallax they all use the same class and fire at the same time.


I have grabbed the code straight from the simple demo source (this is the link for the main demo)


	<h2 id="fade-it">Fade It</h2>

$(document).ready(function() { var controller = $.superscrollorama(); // individual element tween examples controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut})); }); 




What I want to do is swap out the ID for Classes and have multiple all triggered separately once the scroll into view and fade out again when you scroll past.



<h2 class="fade-it">Fade It</h2> (fires when scrolled into view)

lots of txt here....


<h2 class="fade-it">Second Fade It</h2>



  I hope thats clearer.

Link to comment
Share on other sites



The reason for the console log code is to check that everything is on the right place. If not it means that there's a problem with the order of things and probable you should try the window.onload event to create the scrollorama instance.


Try that and let me know how it goes.




Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...