2nd animation not working???

[bradbrad]

Im using superscrollorama on one part of my website, that works fine, but I want to implement a different animation further down, but it just wont work! Please have a look, NB it is still early in developement, so try not be too harsh The About us/Testimonials works fine, but it wont work on Services/Portfolio. I replicated the About us code exactly, but it still wont work!

 

 

Here is the site http://vertex3.vertexwebdesign.co.za/

 

And here is my code http://pastebin.com/e4Ax5d0F

 

please guys, going mad! Javascript isnt my forte, but trying my best here!

 

 

[Rodrigo]

Hi and welcome to the forums,

 

I've never worked with superscrollorama but it should be as simple as repeating the code you have in line 54 of the pastebin provided.

 

Maybe you could post the code that's giving you trouble in order to see what maybe happening.

 

Cheers,

Rodrigo.

[Carl]

Hi Bradbrad,

 

For the best assistance with SuperScrollorama try posting your issue here:

https://github.com/johnpolacek/superscrollorama/issues?state=open where you have a better chance of getting the expert assistance of the plugin's author. 

 

We're not experts on all the third-party tools that tap into GSAP. That said, SuperScrollorama is an excellent product and we've seen many people create fantastic sites with it. I'd suggest experimenting with the demo files provided on github and exploring how all the css/html/and js is set up. 

 

Also, it would really help if you could create a reduced test case that cleanly and clearly shows your setup. Sites like codepen.io and jsfiddle.net are great for producing testable examples that allow others to make edits.

 

I'm sure it would help others to see the css and not have all the php in the way as well.

 

I did look through your code and the only thing that jumped out at me was that you are using the id="slide-it" on multiple elements. Id's should be unique and applied to only 1 element. Not sure if that is causing a problem with SuperScrollorama.

 

Let us know if you need any help relating to the GSAP API. We'd love to help.

[bradbrad]

Thank you guys, I posted it on the github page as well... I just dont get it, I've tried everything, and it just wont work as intended! You can see my progress on www.vertexwebcartel.co.za and here is my index.php page  http://pastebin.com/Si8h4hR9 (Dont know how else to give it besides pastebin). 

 

The animation of line 169 works as I want, but the parralax at 162 doesnt, neither does 175. I dont know if it is a error in my syntax, or if I am missing something, but its been several days and I just cant get it working!

 

If anyone can put me in the right direction, or point out where the fault is, I will be eternally grateful!!!

[bradbrad]

p.s. you can see all the code within that index.php file I put on pastebin, Really hopeing someone can help me finally sort it out!

[Carl]

Sorry, but its really difficult to debug your pastebin. Its very hard to read and as I said previously a reduced test case would go a long way. For a better explanation of what that entails please read this excellent article: http://css-tricks.com/reduced-test-cases/

 

Also I noticed that your issue on github was filed 6am Sunday morning (US). You may need to give the author some time to look into the issue.

 

I really think if you spend an hour creating a file that only has enough js/html/css to replicate the issue you will have a much better shot at getting some resolution.

 

Also, I've looked at your pastebin and live page and can't seem to find these elements in the Dom structure of the live site:

 

 

<div id="examples-parallax">                        <h2 id="parallax-it">Parallax It</h2>                        <h2 id="parallax-it-left">Parallax It</h2>                        <h2 id="parallax-it-right">Parallax It</h2>                </div></div>