Jump to content
Search Community

Combining animations on page load with scrolltrigger

NickWoodward test
Moderator Tag

Recommended Posts

Hello! Got myself a bit stuck and was wondering if anyone could help please :) 

So I've got a header and a hero animation that I animate on page load. I do this by having nested timelines inside a loadTl (which works):
 

const loadTl = gsap.timeline({ defaults: { opacity: 0, ease: 'ease-in', duration: 1 } });

window.addEventListener('DOMContentLoaded', () => {
  loadTl.add(pageFadeIn());
  loadTl.add(headerLoadAnimation(), '<1');
  loadTl.add(heroAnimation(), '<1.5');
 
  // ScrollTrigger animations:
  aboutAnimation(); 
}


I'm also adding scroll trigger animations for sections further down the page in the same listener.

My problem is I'd like the heroAnimation to work in the loadTL and as a scroll trigger animation afterwards (for example so it can be reversed when navigating back up the page). But adding scroll trigger to the heroAnimation timeline doesn't work. This can be replicated by uncommenting these lines in the codepen:
 

function heroAnimation() {
    const tl = gsap.timeline(
      {
        defaults: { opacity: 0, ease: 'ease-in', duration: 1},
        // scrollTrigger: {
        //   trigger: '.hero',
        //   start: '30% 40%',
        //   end: '50% 20%',
        //   toggleActions: 'restart reverse restart reverse',
        //   markers: true
        // }
      }
    );
    tl.from('.tagline', { x: -20 })
          .from('.button', { y: -20 }, '<1');
    return tl;
}

I'm probably making a silly mistake as I'm pretty new to this, but any help would be great!

Thanks,

Nick

See the Pen dyNVdew by nwoodward (@nwoodward) on CodePen

Link to comment
Share on other sites

Yeah, the challenge here is that the way you're setting it up causes its playhead to be controlled by the parent loadTl timeline, but you ALSO want the ScrollTrigger to control it independently. Both can't control the same thing at the same time. There are several ways to set this up, but if you need to use that same animation instance for both, you'd have to do a little fancy footwork. Don't embed it into the loadTl timeline - pause() it and create a separate tween of its playhead, and embed that tween into the loadTl timeline. Then, when that's done playing, you can create the ScrollTrigger. 

See the Pen c5c7d11d3c41b81ccb216f0186c42841?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Also, there's no such thing as "ease-in". I wonder if maybe you meant "power1.in"? 

 

I hope that helps. 

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Sorry, I must have missed the notification of your reply!

I ended up deciding against this from a design perspective anyway, but that's a really useful solution that I'm sure I'll use in the future, so thanks!

Just to double check:

loadTl.add(heroTl.tweenFromTo(0, heroTl.duration()), '<1.5');

creates a separate tween entirely, right? (probably the wrong term, but it doesn't mutate the heroTl?)
 

On 4/11/2021 at 7:36 AM, GreenSock said:

Also, there's no such thing as "ease-in". I wonder if maybe you meant "power1.in"? 

 

😄 ummm... I'm glad you can't see my source files, there's a chance that's not the only time I've written that!  😄

Thanks again,
Nick

Link to comment
Share on other sites

7 minutes ago, NickWoodward said:

Just to double check:


loadTl.add(heroTl.tweenFromTo(0, heroTl.duration()), '<1.5');

creates a separate tween entirely, right? (probably the wrong term, but it doesn't mutate the heroTl?)

Yep. Think of it like an external tween that's literally animating the playhead of that heroTl timeline! So we're using GSAP to animate GSAP. 👍

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Wondering if I could piggyback on this. Very similar, but I have a fixed position element that's listening for certain sections, but also needs to fire on load in the hero. Is it better to create a separate instance for the hero or is there some better way?

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