Jump to content
Search Community

2nd animation not working???

bradbrad 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

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!



Link to comment
Share on other sites

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.




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!!!

Link to comment
Share on other sites

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