Jump to content
Search Community

Scrollmagic parallax + sidebar navigation

mary92 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

Hey,

 

I am looking for a codepen or site example with scrollmagic parallax through sections and static/fixed sidebar navigation. The navigation is 100% of viewport, never hides but has different content for each section; also it has arrows up and down that ofc allow to move between sections.

 

Maybe scrollmagic pinning and/or toggleClass is enough but I am confused. Any advice?

 

Thanks in advance, 

Mary

Link to comment
Share on other sites

Fixing the sidebar should just be a css solution. position:fixed

 

As far as parallax goes, there is more than one way to skin that cat and it will depend a fair bit on your Javascript skills.

 

Scroll Majic and pins are used commonly for this type of thing, for more information you should visit the Scroll Majic site it has some examples. 

http://scrollmagic.io/examples/index.html

 

Shaun had some very good solutions that are applicable to parallax recently in these posts.

 

In the second @Shaun Gorneau created a script that links tween.progress to scroll position which has great potential for parallax effects and would be very flexible for changing and/or adding your own logic to. 

 

var scrollMax = $(document).height() - $(window).height();
$(window).scroll( function(){
  var curScroll = $(window).scrollTop();
  if( curScroll > 0 ){
    rocketTween.progress( curScroll/scrollMax );
  }
})

 

If you search the forum I'm sure you'll find more examples.

 

 

 

 

  • Like 4
Link to comment
Share on other sites

Hey, thanks for advices. I am pretty new to gsap and feel excited by possibilities it gives.

 

Currently I am trying to make more fancy, faster but still smooth scroll between slides, based on this example, but well, I find it hard to achieve smooth parallax effect due to a fact ScrollMagic is not used here:

 

 

See the Pen kDvmC by bassta (@bassta) on CodePen

 

 

Any advices, examples?

Thanks in advance!

Link to comment
Share on other sites

It's a bit hard to tell what you are trying to achieve.

 

The example you show is a nicely functioning slider but doesn't really indicate what you are trying to achieve with respect to parallax.

 

By smooth parallax do you mean you don't want a slide to slide transition and want to scroll the DOM as normal with animations occurring during scrolling or do you want slide to slide scrolling as you have now with animation occurring inside the bounds of the slides?

 

If you're not sure of the type of effect you want perhaps search parallax scrolling websites on google or codepen to find something you like. Perhaps then we could offer some more specific advice.

 

Maybe someone else here can chime in with some examples?

 

 

 

  • Like 3
Link to comment
Share on other sites

Hi @mary92 and welcome to GSAP! You may or may not need ScrollMagic here ... there are many cases where ScrollMagic is not needed for a parallax effect. I have two examples of navigating that produce a parallax effect; one where I use ScrollMagic and one where I don't

 

In this one https://www.reynoldslakeoconee.com/golf I do use ScrollMagic to trigger the parallax movement at specific timings ... as each background image comes into view. (for some reason there is some jankiness in Firefox that I have yet to figure out ... Chrome gives the best result, Safari gives an acceptable result, Firefox is pretty bad)

 

For this one https://www.reynoldslakeoconee.com/our-community/blog, a slider, I do not use ScrollMagic and just allow the slide transition Tweens to account for the parallax movement. It's the slider at the top ... it's not a true "parallax" effect, but uses the same principles which can be adapted for a more immersive parallax.

 

Maybe picking them apart can help you?

 

 

  • Like 3
Link to comment
Share on other sites

Here's are some tutorials from from Peter Tichy that will walk you through basic Scroll Majic use including a parallax tutorial that should get you pointed in the right direction and help you determine if Scroll Majic is the tool for you.

 

https://ihatetomatoes.net/product/scrollmagic-101/?utm_source=GW&utm_medium=banner&utm_campaign=S101 banner demo

  • Like 2
Link to comment
Share on other sites

Hi @mary92. I threw together a quick CodePen to demonstrate this without ScrollMagic. I love ScrollMagic, but I try to stay away from it where possible to remove complexities. Because you're dictating user direction and position (within the content), I'm not so sure you need the sauce of ScrollMagic (which fires events at trigger points). Here I demonstrate

  1. The parallax effect by manipulating the background position
  2. A method to capture scroll direction to dictate which direction to tween to

A few notes ... I'm making use of jQuery and a jQuery plugin (jquery-mousewheel) to simplify everything by getting a positive or negative scroll delta to determine direction and to ignore scrolling after the initial detection until the scroll event is done.

 

Here is the CodePen to illustrate. I'm not sure how well it will function embedded here ... you may want to pop out into CodePen itself.

 

See the Pen ELxzqe by sgorneau (@sgorneau) on CodePen

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

14 hours ago, Visual-Q said:

Here's an example of page piling from a previous discussion that uses scroll majic with pins that may help get you started. 

 

See the Pen LQzmZP by Visual-Q (@Visual-Q) on CodePen

 

 

 

Hey, there's something I don't get... Is it any difference between ScrollMagic and ScrollMajic? Google doesn't provide an answer and  Peter Tichy  uses ScrollMagic in his tutorials. Tough stuff :-)

 

@Shaun Gorneau  maybe you could explain? 

Link to comment
Share on other sites

10 hours ago, mary92 said:

@Shaun Gorneau your example is amazing for what I need now, thank you for an effort! You all are great, I already love gsap community.

 

I'm gonna get through your code carefully as soon as possible and return with an answer. Thank you again <3

 

I'm glad it helped! Feel free to post any questions. I tried to keep it simple to show the key components at work ... but that doesn't mean it's clear! :) 

 

52 minutes ago, mary92 said:

 

Hey, there's something I don't get... Is it any difference between ScrollMagic and ScrollMajic? Google doesn't provide an answer and  Peter Tichy  uses ScrollMagic in his tutorials. Tough stuff :-)

 

Both = ScrollMagic :) 

  • Like 1
Link to comment
Share on other sites

14 hours ago, Shaun Gorneau said:

I threw together a quick CodePen to demonstrate this without ScrollMagic.

 

Great solution, @OSUblake should promote you to Vice President of the 'You May Not Need Scroll Majic' club.

 

Performace is somewhat choppy, at least on my machine almost certainly due to animating the large background images, not the script itself, I'm curious has the community come up with any solutions/best practices for optimizing performance in this kind of situation?

  • Like 1
  • Haha 3
Link to comment
Share on other sites

Yeah ... the performance is certainly choppy because of the big backgrounds. I didn't do my "preferred" method of manipulating the dom to create new element and applying the background image and then tweening that element's Y position.

 

As a matter of fact ... I'll fork it and do that. :)

  • Like 2
Link to comment
Share on other sites

Yes, the solution is great although it is not smooth. Also full-screen background images are jumping during a scroll. jQuery mousewheel plugin seems quite sensitive - it can scroll to third or even fourth section on small move of finger at the starting point. It is already too high level for me to fix ;-) I’m doing small content animations in a meantime.

 

The solution is great for beginners cause I can manipulate the order and time of tweens with ease!

  • Like 1
Link to comment
Share on other sites

17 minutes ago, mary92 said:

jQuery mousewheel plugin seems quite sensitive - it can scroll to third or even fourth section on small move of finger at the starting point.

 

I'm not familiar with the jquery plugin but you should be able to wrap it in a timeout or find a debouncing function to prevent overscroll. I.e. prevent it from firing more than once per scroll.

 

Shaun would know more about it maybe the plugin has a setting for debouncing?

  • Like 4
Link to comment
Share on other sites

Here is a new pen that does several things ...

 

1. Takes the background image applied to each <section>, prepends a new set of elements within each section and applies that background to the inner element. The reason it applies to the new inner element is to make it easy to tween the outer element without affecting the inline style of the inner.

<div class="background-image-wrapper"><div class="background-image" style="background-image: url(//copied/from/<section>)"></div></div>

 

2. Now tweens the `y` of each background-image-wrapper (rather than the css image-background) along with a slight tween of the rotation to force hardware acceleration. Side note ... I prefer to Tween elements x/y with background images applied rather than the x/y of an <img> because responsive full-screen (or even just full-width) images are so much easier with css `background: cover`.

 

3. I've timed the slide tween to be perfectly in sync with the background-image-wrapper tween and increased the image tween distance ... makes for a better parallax effect.

 

4. Allow for down and right keys to move down the page, up and left key move up the page.

 

5. isScrolling is now set to `false` when the last Tween has completed. This should offer a better mouse-wheel experience. But ... I'm not sure ... I'm using swipe gestures on a trackpad and an Apple Magic Mouse. Not sure what it's like on a physical wheel without momentum.

 

 

I've tested in MacOS High Sierra (10.13.4) ... Safari, Chrome, Firefox, and Opera on a 2013 MacBook Air ( i7 1.7Ghz, 8 GB ram, Intel HD Graphics 5000 1536 MB) ... fairly modest specs.

 

The results I see are

 

Safari 11.1 - Buttery smooth with the *occasional* minor snag

Chrome 66 - Buttery smooth until it's not :/ It's perfect, then hangs for .5 seconds, then perfect again .. on pretty much each slide transition. No idea why.

Opera 52 - Nearly identical to Chrome (to be expected)

Firefox 59.0.2 - Holy sh*t! Didn't expect it to be so good ... I usually wrestle with Firefox. It's perfect there ... I just need to do some image preloading.

 

See the Pen qYEKLy by sgorneau (@sgorneau) on CodePen

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

22 minutes ago, Shaun Gorneau said:

Chrome 66 - Buttery smooth until it's not :/ It's perfect, then hangs for .5 seconds, then perfect again .. on pretty much each slide transition. No idea why.

Opera 52 - Nearly identical to Chrome (to be expected)

 

Has anyone else noticed performance issues with these browsers? Scrolling and changing tabs has been really slow for me, and I've been going insane the past couple of weeks trying to figure out the problem.  

  • Like 2
Link to comment
Share on other sites

2 hours ago, OSUblake said:

 

Has anyone else noticed performance issues with these browsers? Scrolling and changing tabs has been really slow for me, and I've been going insane the past couple of weeks trying to figure out the problem.  

 

I'm now noticing a lot of *other* issues with past and current projects in Chrome 66 :shock:

 

What did they do?!?

 

 

I+was+so+mad+because+of+that+ending+_2209b8740c75eb9630cbb865c26f5f98.jpg

Link to comment
Share on other sites

18 minutes ago, Shaun Gorneau said:

I'm now noticing a lot of *other* issues with past and current projects in Chrome 66

 

Yikes... I'm not seeing any problems with any of my sites on my machine but I hope they aren't screwing up on other peoples.

 

Should we start a thread for this to see if we can get more feedback on the issue?

Link to comment
Share on other sites

False alarm!! Caches were a foolin' me! It appeared Chrome 66 wasn't loading some elements on pages (other browsers were) ... I got a bit heated rather than taking a step back and thinking about the obvious: wifi going nuts but caches doing their work. :)

 

All good here! ( other than the stutter I still see in my Pen above with Chrome )

  • Like 1
  • Haha 2
Link to comment
Share on other sites

16 hours ago, Shaun Gorneau said:

 

Firefox 59.0.2 - Holy sh*t! Didn't expect it to be so good ... I usually wrestle with Firefox. It's perfect there ... I just need to do some image preloading. 

 

@Shaun Gorneau preloader? I'm trying to include one as well. Maybe will put my first pen here... tomorrow :-D

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