Jump to content
GreenSock

jedifunk

Full screen sections

Recommended Posts

Hey all,

 

Worked with GSAP before, but this is a new ask for me.

Looking to build a page that has 4 sections, where each section is full screen. Main things I am looking to figure out are

- Fade in/out each section on scroll

- Turn off gsap/animations on mobile and have the sections be like normal divs

 

I've got a start in this codepen, but can't figure out how to get the next section to fade into the trigger container. Any help is appreciated.

 

Bryce

See the Pen NWNayGy by jedifunk (@jedifunk) on CodePen

Link to comment
Share on other sites

 

Hey @jedifunk - welcome to the forum.

 

 

Does the sort of concept in both these threads maybe help with what you want to achieve?

 

 

 

 

 

 

For the part of deactivating ScrollTrigger on mobile devices, you should have a look at ScrollTrigger.matchMedia:

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

Makes it really easy to handle your ScrollTriggers for different device-widths.

 

 

 

Cheers.

Paul

 

  • Like 2
Link to comment
Share on other sites

Alright.

 

I wrapped my head around this for a bit, since the fading-in-and-out part seems to be important to you, and I was interested in this concept myself, too.

 

There are multiple approaches to this.

 

For both following examples, I set your .div to 'position: fixed' for widths above 600px and to 'position: relative' for widths below 600px, in your CSS.

 

This way, using ScrollTriggers' .matchMedia functionality, you can make sure, that the scroll behaves the usual sort of way below that breakpoint.

 

Since you use scrubbing, one keypoint to all here, is understanding, how durations work on ScrollTrigger-timelines with scrub enabled - because they work different from durations on regular tweens/timelines. You find more info on this in this section of the docs.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

 

 

The first example here uses one ScrollTrigger with one large timeline and all the section-tweens fed to it manually - again: one keypoint to this is duration.

 

See the Pen e8b6e8ff7479c8ec197b36159f995aa8 by akapowl (@akapowl) on CodePen

 

 

 

This second example creates an individual ScrollTrigger with a timeline .forEach .div  you have, and one extra ScrollTrigger, that handles snapping ( I added snapping to both examples because I thought in a concept as such, with scrub enabled, it might come in handy ).

 

Also, note that handling the durations the way I did there, might not be optimal.

 

See the Pen 3f8ac366b050281c0b8a6bf0f8b2524c by akapowl (@akapowl) on CodePen

 

 

 

One more thing:

 

I reverted GSAP and ScrollTrigger back to v3.4.2 in both examples, because I noticed, that in both scenarios, snapping did not work properly (very slow movement of the scrollbar is noticable, but the page barely moves) with any version above that - so I hope, I did not make any severe mistakes here. 

 

@GreenSock @ZachSaucier - could you maybe have a look at this.

Everything seems to be working just fine with 3.5.1 for example, except for the snapping.

 

Here are both versions (reduced; without the matchMedia part) with GSAP and ScrollTrigger v3.5.1

 

See the Pen 2e3f974cc48ba7cf709ff397fc7ec957 by akapowl (@akapowl) on CodePen

 

See the Pen 8c0bebd539a69a6233abb720eae7c82a by akapowl (@akapowl) on CodePen

 

 

 

EDIT:

Okay, now I am more than confused.

The snapping seems to work in the previews in this post but neither does it in codepen's editor-view, nor in its debug view. 🤔

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

@akapowl Thanks for looking at this. I'll see if I can fill in the blanks on the other items i need.

I think I failed to mention that the black background stays for all slides and the content inside will fade in/out as the user scrolls, but I was having such an issue with getting the basic concept to work.

 

I'll see where this leads me. Thanks again.

  • Like 1
Link to comment
Share on other sites

On 9/10/2020 at 4:16 PM, jedifunk said:

I think I failed to mention that the black background stays for all slides and the content inside will fade in/out as the user scrolls

 

I don't know if I understood this correctly, but you could get to a result as such by simply tweaking the durations a bit, like in this example

 

See the Pen 05c71a887b9c586cf8b2d249f59c03c9 by akapowl (@akapowl) on CodePen

 

Link to comment
Share on other sites

25 minutes ago, akapowl said:

Everything seems to be working just fine with 3.5.1 for example, except for the snapping.

You're saying those last 2 demos don't snap for you? What OS and browser are you testing in? Is the same thing true in the debug view?

Link to comment
Share on other sites

37 minutes ago, akapowl said:

EDIT:

Okay, now I am more than confused.

The snapping seems to work in the previews in this post but neither does it in codepen's editor-view, nor in its debug view

 

 

Added this later on.

 

The snapping does work with 3.5.1 in the previews inside the post but when opened on codepen itself neither does snapping work in editors-view nor in debug mode.

 

 

11 minutes ago, ZachSaucier said:

What OS and browser are you testing in?

 

Windows 10 - Opera Version:70.0.3728.178

 

Works as expected on Chrome, Edge (Chromium) and Firefox though.

I'll check if it is anything related with an extension I am using.

 

 

Link to comment
Share on other sites

I didn't know people actually used Opera ;) it seems to work fine for me in Opera.

 

Checking incognito would be helpful.

  • Like 1
Link to comment
Share on other sites

would you suggest that if i need different timings and animations in each section that i create separate timelines for each?

Link to comment
Share on other sites

 

4 minutes ago, ZachSaucier said:

I didn't know people actually used Opera ;) 

 

https://gs.statcounter.com/browser-market-share/desktop/worldwide

 

Apparently even less, than those who use IE - well, what does that say about me now 😅

 

Just wanted to make sure this is nothing related to GSAP - sorry for the trouble :) 

 

This is what I am experiencing - deleting all extensions and switching to incognito-mode didn't resolve it.

 

 

 

 

Link to comment
Share on other sites

18 minutes ago, jedifunk said:

would you suggest that if i need different timings and animations in each section that i create separate timelines for each?

 

Hard to say. You might be - but I think, finding the best solution for yourself really depends on what exactly your final aim is.

Link to comment
Share on other sites

FYI, CodePen has some voodoo they do in their environment that seems to do some funky stuff with the viewport width/height reporting. Are you only seeing that issue in CodePen or can you reproduce it locally or outside of CodePen? 

  • Like 1
Link to comment
Share on other sites

 

You're right - no reproducing this in local environment - so it really seems to be a codepen-thing.

 

I'll try keeping that in mind for the future. Just hope I'll remember, before I go running around, ringing alarm-bells again 😁

  • Thanks 2
Link to comment
Share on other sites

@akapowl if i needed a section below my pinned area, how would i do that ... given that the pinned area is set to be full browser width/height? simply unpinning the container doesn't seem to be enough.

Link to comment
Share on other sites

 

Well, so far, there is nothing being pinned, if I am not mistaken.

 

You could add 'pin:true' to that ScrollTrigger for your #container though, 

and set the height of your #container to 100vh for window-widths where you want the fading-thing to happen,

 

Then you could add a 

 

<div class="below-container"></div>

 

below your #container.

 

See the Pen 9d73fd04000f927d65fe209646c9a68a by akapowl (@akapowl) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

oh, i thought i had pinning turned on previously, but maybe when you helped me get my first part sorted you turned that off...

 

i'll look at that again and see where i went wrong. thanks.

Link to comment
Share on other sites

 

Yes, I got rid off it before.

 

The way things were set-up, with all the .divs being at top: 0 with position: absolute anyway, there was no need pinning the #container.

But with another container further down the page, there now is.

  • Like 1
Link to comment
Share on other sites

@akapowl hey - couple questions (if these should be separate threads let me know ... not sure how mods like things around here).

 

http://dev.yamamotoqa.com/proforce/

 

1. With the pinning on, how to i remove the massive gap between the end of the pin and the new content i've added below the pin container?

2. I've also added a separate animation at the top of the page that runs on page load... how would i go about reversing it, via scrolling, when a user scrolls back up? its not part of the current scrollTrigger (since it runs on load).

 

thanks for any guidance.

Link to comment
Share on other sites

 

Hey @jedifunk

 

 

13 minutes ago, jedifunk said:

1. With the pinning on, how to i remove the massive gap between the end of the pin and the new content i've added below the pin container?

 

Your container is still set to

 

#container {
  min-height: 100vh;
  height: 500vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

 

One important thing, I mentioned above, was this: 

 

On 9/16/2020 at 5:51 PM, akapowl said:

set the height of your #container to 100vh for window-widths where you want the fading-thing to happen

 

This should remove that big gap you are experiencing.

 

 

 

 

19 minutes ago, jedifunk said:

2. I've also added a separate animation at the top of the page that runs on page load... how would i go about reversing it, via scrolling, when a user scrolls back up? its not part of the current scrollTrigger (since it runs on load).

 

 

Hard to actually say, but maybe you could try triggering a reverse of the intro-timeline in an onLeaveBack-callback of your ScrollTrigger for the #container.

 

onLeaveBack: () => {

	intro.reverse();
  
}

 

But then you'd probably also have to trigger a play of the intro-timeline onEnter again, if you wanted it to run, when you scroll back down.

 

I am not sure, if this would do, what you intended, since I am not sure, if I understand you correctly.

Also, for me it is a bit hard to find a suitable 'solution' without an actual demo to work on, sorry.

 

You can give this a try, though.

 

  • Like 3
Link to comment
Share on other sites

@akapowl

 

first bit worked a charm ... thought i had already adjusted the height! 🤷‍♂️

 

i'll try to throw that link into a codepen ... it probably won't have all the images, but at least you could see the animation JS

Link to comment
Share on other sites

Am having trouble trying to drop the current development back into codepen, since I don't have a pro account and linking the images is important to this layout..

 

Instead I'm attaching the JS so you can at least see what I'm doing from a code standpoint.

 

http://dev.yamamotoqa.com/proforce/

 

@akapowl wondering if instead of setting the initial state of the intro animations in my CSS file, if i could use GSAP to set those ... would that help in reanimating them?

 

gsap.registerPlugin(ScrollTrigger);

let intro = gsap.timeline();
//intro.duration(4);
intro
  .to(".intro .bkg", {duration: 1, autoAlpha: 1})
  .to(".intro .rt-logo", {autoAlpha: 1})
  .to(".ih", {autoAlpha: 1})

ScrollTrigger.saveStyles(".div");
ScrollTrigger.matchMedia({
  // desktop
  "(min-width: 601px)": function () {
    // setup animations and ScrollTriggers for screens 800px wide or greater (desktop) here...
    // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore.
    // Note
    // .div was set to 'position: fixed' in your CSS for widths above 600px and to 'position: relative' for widths below 600px
    var sections = gsap.utils.toArray(".div");
    var fadeInOut = gsap.timeline({ paused: true, timeScale: .1 });

    fadeInOut
      .addLabel("intro-visible")

      .to([".intro .rt-logo", ".ih"], {  autoAlpha: 0, delay: 2 })
      .to(".brand-row .rt-logo", { autoAlpha: 1})
      .to(".s1 .bkg", {  autoAlpha: 1 })
      .to(".n1", { autoAlpha: 1})
      .to(".h1", {  autoAlpha: 1 })
      .to(".c1", { autoAlpha: 1})
      .addLabel("s1-visible") 
      
      .to([".intro .bkg", ".n1", ".h1", ".c1"], {  autoAlpha: 0, delay: 2 })
      .to(".s2 .bkg", {  autoAlpha: 1 })
      .to(".n2", { autoAlpha: 1})
      .to(".h2", {  autoAlpha: 1 })
      .to(".c2", { autoAlpha: 1})
      .addLabel("s2-visible") 
      
      .to([".s1 .bkg", ".n2", ".h2", ".c2"], {  autoAlpha: 0, delay: 2 })
      .to(".s3 .bkg.b3-1", {  autoAlpha: 1 })
      .to(".n3", { autoAlpha: 1})
      .to(".h3", {  autoAlpha: 1 })
      .to(".c3", { autoAlpha: 1})
      .addLabel("s3-visible")

      .to([".s2 .bkg", ".c3"], { autoAlpha: 0, delay: 2})
      .to(".n3", { x:-385})
      .to(".h3", {  y:-115 })     
      .to(".details", {  autoAlpha: 1 })
      .to(".s3 .bkg.b3-2", { autoAlpha: 1})
      .to(".i1", { autoAlpha: 1})
      .to(".i1", { autoAlpha: 0, delay: 2})
      .to(".s3 .bkg.b3-3", { autoAlpha: 1})
      .to(".i2", { autoAlpha: 1})
      .to(".i2", { autoAlpha: 0, delay: 2})
      .to(".s3 .bkg.b3-4", { autoAlpha: 1})
      .to(".i3", { autoAlpha: 1})
      .to(".i3", { autoAlpha: 0, delay: 2})
      
      .to('.s3', { autoAlpha: 0})
      .to('.b4', { autoAlpha: 1})
      .to(".n4", { autoAlpha: 1})
      .to('.h4', { autoAlpha: 1})
      .to(".c4", { autoAlpha: 1})
      .addLabel("s4-visible")
      ;

    ScrollTrigger.create({
      trigger: "#container",
      pin: true,
      start: () => "top top",
      end: () =>
        "+=" + (window.innerHeight * sections.length - window.innerHeight),
      scrub: .5,
      animation: fadeInOut,
      invalidateOnRefresh: true,
      // markers:true,
      // onLeaveBack: () => {
      //   intro.reverse();
      // }
    });
  },

  // mobile
  "(max-width: 600px)": function () {
    // The ScrollTriggers created inside these functions are segregated and get
    // reverted/killed when the media query doesn't match anymore.
  },

  // all
  all: function () {
    // ScrollTriggers created here aren't associated with a particular media query,
    // so they persist.
  }
});

 

Link to comment
Share on other sites

Finding that the scrollTrigger is unable to reach the onLeaveBack state ... guessing its because the trigger is set to 100vh.

 

is there a way to set another trigger that sits like 20px from the top that is only there to retrigger the intro animation?

Link to comment
Share on other sites

 

I tried wrapping my head around this for quite a bit now, and I can't seem to find a problemless solution.

 

 

The problem I see in your idea in general, is that its aim is to play a regular timeline ( your intro ), that has tweens on elements, that you also want to be tweening on, when scrolling.

 

So, assuming, that your intro timeline was to be reversed, when you scrolled back up to the top, that would create conflicting tweens with your ScrollTrigger setup - e.g. when instantly scrolling back down again.

 

Also, you will notice, that when your page has loaded, and you start scrolling right away, that first set of text you have there, will never be visible.

 

 

 

I can only give you a suggestion on the intro-timeline playing on load, but not on the reverse playing when scrolling back up, sorry about that.

 

You could initially set the overflow of your body to hidden and prevent users from scrolling, as long as your intro animation is playing.

Then, when your intro-timeline has finished, you can set the overflow back to its initial state.

 

gsap.set(".headline.ih, .logo", {autoAlpha: 0});

document.body.style.overflow = 'hidden'; 

let intro = gsap.timeline();
  
intro
  .to(".headline.ih", { delay: 1, duration: 1, autoAlpha: 1 }, 0)
  .to(".logo", { delay: 1, autoAlpha: 1 }, 0)
  .then(function () {	
    document.body.style.overflow = ''; 
  })

 

 

 

This way, you can at least make sure, that all the content is in place, when the user starts scrolling.

 

 

See the Pen bfc1d0860ed2473f59c362f5b9a613e1 by akapowl (@akapowl) on CodePen

 

 

 

  • Like 3
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.
×