Jump to content
Search Community

Combining scrub and batch for parallax

marius96 test
Moderator Tag

Recommended Posts

Hello everybody!
I've been experimenting with ScrollTrigger in the last few days and I'm wondering how can I create a parallax effect while scrolling for the h1 using ScrollTrigger.batch()? 
I know I can create a parallax effect if I add scrub:true , but it doesn't seem to work in this case.
Is there a more elegant way of doing this instead of copy and pasting lines of code to every new div?

 

See the Pen XWdJbdR by make96 (@make96) on CodePen

Link to comment
Share on other sites

I created another CodePen.

Here you

See the Pen oNxgLbr by make96 (@make96) on CodePen

.

This is not an ideal solution, because if  I add more h1.fade , the animations for the other elements will start as soon as the scroller-start-s2 bar will hit the top of the first h1.fade .

It's best if you check them in a mobile view, because I'm always taking a mobile first approach in my prototypes.

Link to comment
Share on other sites

Sorry, I'm still not understanding what you're trying to do. Are you just wanting your headings to fade in when they come into view?

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".fade").forEach(elem => {
  gsap.from(elem, {
    opacity: 0,
    y: 50,
    scrollTrigger: elem
  });
});

 

Side notes:

  • staggerFromTo is from the old version of GSAP. Just use the stagger property in the vars object like the stagger docs say to.
  • You don't have to register gsap as a plugin... that doesn't make much sense.
  • I recommend reading the GSAP 3 migration guide:
  • Like 1
Link to comment
Share on other sites

@ZachSaucier

Yes, I want to fade in and and translateY every heading when they come into view, but I don't want that animation to end as soon as the headings come into view, I want to animation to be controlled by scrolling.

That's the main difference between the two CodePens, don't look at the code, just compare the two results and you'll spot the differences.

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