Jump to content
Search Community

Diagonal Parallax Scrolling. Can it be done?

rhormazar 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

I am trying to figure out if I can use Greensock for a page we're building. I haven't learned the library yet so the question may be "newbie-sh."

 

What we are trying to do is a timeline page where things happen as you scroll down. Because of the way the timeline is being visually designed, it is intended to scroll diagonally, then down, then right, etc.

 

I have seen parallax sites that scroll horizontally and vertically, but not many scroll diagonally. Is it so much harder to do? Does it create other issues?

 

Any clarity and pointers are welcome.

 

Thanks in advance.

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

From my understanding of your question, I'd say it sounds entirely possible.

Here are 2 examples that use some sort of mix of horizontal, vertical, and diagonal movement.

 

 

http://www.nintendo.com.au/gamesites/mariokartwii/#snes

http://makeyourmoneymatter.org/

 

Using GSAP, there is really nothing constraining what properties you animate or what direction you make your content move.

Once you have the basics of your animation working, it seems fairly straight-forward to have a tool like ScrollMagic: http://scrollmagic.io/ handle controlling the animation via scrolling.

 

Here are some great resources to get started

http://greensock.com/get-started-js

https://ihatetomatoes.net/simple-scrollmagic-tutorial/

  • Like 2
Link to comment
Share on other sites

Hi and welcome to the GSAP land.

 

As Carl mentioned it is possible to animate your page diagonally on scroll.

 

I wouldn't say it's any harder than creating horizontal or vertical scrolling website.

 

Once you create the GSAP Tween or Timeline you can than add it to a ScrollMagic Scene and let ScrollMagic trigger or play your animation.

 

If this is your first attempt at creating parallax scrolling website, I would recommend only animating the cheap CSS3 properties such as opacity and transforms.

 

This will result in a smooth user experience across all the modern browsers.

 

And here's another 24 Tips For Making Great Parallax Websites.

 

Good luck.

Link to comment
Share on other sites

Carl, thank you for the examples and your comments. I will continue to do some research on and practice with Scroll Magic, starting those links you shared. At the moment I am avoiding the diagonal scroll until I understand the library better. With my current knowledge I get lost when looking at someone else's final code. 

 

Petr, thank you for your suggestions. I have crawled your blog and YouTube channel a few times already and probably will continue doing so. Still waiting for your Greensock workshop! And please do a demo of this subject.

 

A few days ago I bought the Greensock eBook that just came out. Hopefully in a couple of weeks I'll look back at this and smile with confidence :)

Link to comment
Share on other sites

  • 8 months later...

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