Jump to content
Search Community

Animate a full page section on scroll to reveal the main website

BhanuSingh test
Moderator Tag

Recommended Posts

I am trying to make an animation work. The structure of design is such that.

 

Intro section is on the top of the website. Once the user scrolls through the intro section a animation runs which basically moves the intro section to (-)ive y-axis until it goes away. Once the intro goes outside of the I have to remove the intro section altogether(or prevent it to be scrolled back to the intro section).

 

I was able to set the animation up. But the problem is In my animation when my Intro section animates my hero section with other sections start to scroll. I don't want the hero section or any other section on the page to scroll until the intro section  goes away.

 

I am 10 hours into this now.  Still unable to fix this.

 

See the Pen wvGavPg by bhanu-krenovate (@bhanu-krenovate) on CodePen

Link to comment
Share on other sites

Hey Bhanu and welcome.

 

We don't recommend using ScrollMagic. Instead we recommend the official GSAP scroll plugin: ScrollTrigger! It's smaller, easier to use, has more features, and is actually maintained. 

 

Your two demos do two different things so I'm not really sure what your end goal is. I think you want something like this?

See the Pen ExKjGKz by GreenSock (@GreenSock) on CodePen

 

I also noticed you're using the old syntax for GSAP. We highly recommend the GSAP 3 syntax. You can learn more about that here:

 

  • Like 2
Link to comment
Share on other sites

On 8/10/2020 at 6:49 PM, ZachSaucier said:

Hey Bhanu and welcome.

 

We don't recommend using ScrollMagic. Instead we recommend the official GSAP scroll plugin: ScrollTrigger! It's smaller, easier to use, has more features, and is actually maintained. 

 

Your two demos do two different things so I'm not really sure what your end goal is. I think you want something like this?

 

 

 

I also noticed you're using the old syntax for GSAP. We highly recommend the GSAP 3 syntax. You can learn more about that here:

 

Hey @ZachSaucier,

 

This was exactly what I wanted. The code looks so simple. I will definitely use ScrollTrigger for all my scroll related animation and thanks for the Codepen.

 

I do have one more question regarding this. I have added an animation to this trigger but I want that animation to apply to the trigger element only when user has scrolled  30% of the screen, until then the scroll should not let my trigger element scroll.

 

What happens is that my scrolls happen and then the animation starts.

See the Pen mdPeXrX?editors=0010 by bhanu-krenovate (@bhanu-krenovate) on CodePen

Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

Sorry, I don't understand what you're wanting and your code makes even less sense to me :D 

 

Can you try to explain what you're wanting using the demo that I made as a reference?

Sure,

 

I am trying to get the scroll effect like this https://dpotferstudio.com/, @ZachSaucier.

They way I scroll a bit it then snaps to the top. It doesn't respond to my scroll instantly. I would want my scroll to respond once the user has scrolled 30% of the view port from the top.

Link to comment
Share on other sites

5 minutes ago, BhanuSingh said:

I am trying to get the scroll effect like this https://dpotferstudio.com/

That effect is different - as soon as you scroll at all it animates to the page's content. In other words, there's no actual scrolling that happens on the load screen. I actually covered how to do that sort of thing in another thread earlier today but I'll copy it here with a slight modification:

  1. Disable scrolling during the load.
  2. Position the intro/loader content with position: absolute or fixed over top of the normal page content.
  3. When the page is done loading and the user scrolls, transition out and then optionally remove the intro/loader content. Enable scrolling.

You could technically do what you're trying to do but I don't recommend it because it's very not familiar for users. If you did still want to do it, you shouldn't attached the animation to the ScrollTrigger directly. Instead you should make sure it's paused, update its progress in the ScrollTrigger's onUpdate callback, and once the progress is above 0.3 you kill the ScrollTrigger and play the rest of the animation.

  • Like 1
Link to comment
Share on other sites

 

Quote

update its progress in the ScrollTrigger's onUpdate callback, and once the progress is above 0.3 you kill the ScrollTrigger and play the rest of the animation.

Hey @ZachSaucier

I understood what you are saying, but I am unable to implement some bits.

 

  • I have successfully hooked my animation to play when the progress is more than 0.3.
    if(self.progress >= 0.3){
      gsap.fromTo('.intro', 2 , {y:0}, {y: '-100%', ease: 'power4.out',});
    }

     

  • You said " Instead you should make sure it's paused" I tried it by
    if(self.progress < 0.3 ){
        gsap.to('.intro', {duration:0,  y:"0"})
    }
      
    doing this and it didn't work.
     
  • Also even after my intro going -100% off the page onLeave is not called. I didn't add it onUpdate because it would instantly kill everything.
     

Here is the codepen where I tried it.

See the Pen yLOYvRY by bhanu-krenovate (@bhanu-krenovate) on CodePen

Link to comment
Share on other sites

I kill the ScrollTrigger. The animation is separate and told to play from that point. If you want it to take longer then you should change the duration of the animation. 

 

If you want to make sure the animation is fully complete before killing the ScrollTrigger you could kill it inside of the onComplete callback of the tween.

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