show gsap: parallax intro (works on mobile)

[Guest Vic_]

I'm too tired tonight to make a code pen, but here is how I did parallax. I did not use scrollmagic, I had some issue.

 

Step 1: get the tweens to work just by self, w/o triggers.
For example, on click.
Only once that is tested work on triggers, after tweens work.

Step 2: Load your trigger lib, Waypoints should work also, but you can see I used http://vissense.github.io/vissense
Note it is best to trigger on another element, not the one you are tweening - so you need to track 2 things: trigger element and tweened element.
Test in console that your trigger work(console.log) and for mobile use the 'USB debug' - it's easy to debug mobile!!!!!
You can see this code run on http://masons-foundation.org/en/about/about page, the bottom address tweens.


Step 3: Of course you should get a lot more elements moving, z-index, .png transparent and maybe use background-attachment: fixed. Happy to hear comments on any of these examples as far as ideas.

 

hth,

Vin

[Jonathan]

Thank you for sharing your parallax example! Happy Tweeting!