Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rhormazar

Diagonal Parallax Scrolling. Can it be done?

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 post
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 post
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 post
Share on other sites

Sorry for jumping here... I just had a thought. What if their was a parallax site based on a bezier curve....

 

Now if I only was advanced enough to do it :P ( some day ) 

  • Like 2
Link to post
Share on other sites

@alwayzambitious, yep that is possible with GSAP. You can have a large 'canvas' (doesn't have to be HTML5 <canvas> element) and move around it based on bezier curve tween or timeline.

 

I might do a simple demo on my site in the future.

  • Like 1
Link to post
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 post
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.

×