OnLoad Animate only visible elements

[thunderfoot 6 Likes (Newbie)]

I have a similar question to this. 
On load, I Fire the main tween, that contains two sub animations.
 - heroAnimation
 - cardAnimations

I would like to animate everything that is only visible, probably the hero +  the first 1 /2/3 cards (depending on viewport size).
How could I add scrolltrigger to the rest of the cards so they don't animate on load but on scroll.

Could this also be "tweaked" when resize?

Thanks!
 

See the Pen yLRvYPv by andresclua (@andresclua) on CodePen

[GreenSock 18,885 Likes (Superhero)]

That's exactly what ScrollTrigger is perfect for: 

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

 

Is that what you're looking for? I'm not really sure what you meant by "could this also be tweaked when resize". You can do pretty much anything with GSAP. You may be looking for gsap.matchMedia() (?) 

[thunderfoot 6 Likes (Newbie)]

I'm pretty sure I didn't explain myself correctly, I have updated the pen with a possible solution, BUT idk if is the "right way".
I want to animate on load if visible, and if is not visible apply a scrolltrigger.

I change the animation so is more clear.

At first I tried with 
 

isInViewport(el) {

const rect = el.getBoundingClientRect();

return (

rect.top >= 0 &&

rect.left >= 0 &&

rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&

rect.right <= (window.innerWidth || document.documentElement.clientWidth)

);

}

but then I saw this

See the Pen yLRvYPv by andresclua (@andresclua) on CodePen

 

[Cassie 5,658 Likes (Superhero)]

I'd honestly just add a ScrollTrigger to everything. If it's in view it'll just animate immediately, if it isn't it'll animate on scroll.

Just like Jack showed here. Is there something this isn't achieving for you or another issue you're trying to work around?

 

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

[GreenSock 18,885 Likes (Superhero)]

Yeah, I agree with @Cassie. I think you might be overcomplicating this. Or maybe we're misunderstanding your goal. If so, please elaborate on exactly what isn't working the way you hoped in the demo we provided. 

[thunderfoot 6 Likes (Newbie)]

hey guys, first of all thanks for your fast reply!
I'm not saying you are not right at all, It is quite strange that when I add Scrolltrigger is not playing on load it only plays if I remove scrolltrigger.
I know that with a video you can't do too much - link   so just if you have as reference.

@Cassie How do you to for fire an animation if user do not scroll? 😅

 

[Cassie 5,658 Likes (Superhero)]

If the animation has already passed the start marker it will just play. Unless you have scrub enabled in which case it's tied to the scroll.

If you add markers you can see if the start marker has been triggered or is yet to be triggered - if it hasn't been triggered yet then you may need to shift the position of the start markers. Hard for us to see without a demo though.

Hope this helps. If you need more help, pop over a codepen and we can take a look

[thunderfoot 6 Likes (Newbie)]

ok, so I made another example and tweak a little bit.

See the Pen ZEqxGWY by andresclua (@andresclua) on CodePen

I want my animation on load to run as a sequence

1. Animate hero
2. Animate title
3. Animate subtitle
4. then show the CTA
5. then animate cards with stagger.

When I'm on a screen that everything fits I will do the whole thing ( no scrolltrigger needed).
Case A
imagine that I'm on a tablet or phone and on load User only can see only the hero, but cta & cards are not visible, how could I trigger same animation? 
Case B
imagine that I can see hero and CTA, but no cards visible, I still want on load animate 1 to 4, and on scroll fire animation with scrolltrigger

Maybe is using matchmedia or ScrollTrigger.isInViewport() or isInViewport function that I wrote above ^ 

Hope this is more clear, and TSM for all your help.

[Rodrigo 5,907 Likes (Superhero)]

Hi,

 

I'm not sure I totally follow what you're trying to do, but maybe try this in your init method:

init(){
  this.tl.add(this.heroAnimation())
  this.tl.add(this.bannerAnimation())
  this.tl.call(() => this.cardAnimations())
}

By using the add method, you're telling GSAP to call the cardAnimations method when the Timeline is created and not after the previous animations are completed. The call method will execute that function after the previous animations are completed.

 

For different screen sizes you can use GSAP MatchMedia in order to run different types of animations based on the screen height:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this helps.

Happy Tweening!