How can I animate with .from() that uses scrollTrigger AFTER the page loads? Currently any element that loads in the viewport is already 'animated in' 100%.

[grizhlie]

Hi gang,

 

I'm wondering if there is some inbuilt way to delay scrollTrigger behaviour when the page loads.

 

Currently when I load a page, because scrollTriggers rules are met in the below function, the page loads with the element already having animated in. This is because on desktop the hero section is not 100vh, isntead its around 50vh. And the next section already has below rules met.

 

gsap.from(element, {
    x: -50,
    opacity: 0,
    scrollTrigger: {
        trigger: element,
        start: "top 90%",
        end: "bottom 85%",
        scrub: true,
        once: true
    }
} 

I'm wondering if there's a way to stop gsap from doing this initial calculation straight away? Some property I missed or misunderstood would be awesome.

 

The demo should show what I mean relatively well. The H1 should have 'started' animating in. But the calculation is done and the element is already set mid-animation. Is there a way to make it animate on page load instead of the animation already being set midway?

 

I hope I'm making some sense, any help is appreciated 😅

 

Cheers,

 

Griz

See the Pen oNEqzPv by grizhlie (@grizhlie) on CodePen

[PointC]

I'm not really sure I follow the question. If the element is already past the start trigger, it's going to play. It sounds like maybe you want a different ScrollTrigger for desktop and mobile? 

 

Have you seen the .matchMedia() method?

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

 

Or, if you want something to wait, you can always use a delayedCall.

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

 

Does that help? Or maybe I'm missing the objective altogether. 

 

Happy tweening.

 

[Cassie]

I'm also a little confused here.

Maybe you just want to change the start marker position? Like so?

 

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

 

Or maybe you don't want to use scrub at all?

See the Pen poaLPPq?editors=0010 by GreenSock (@GreenSock) on CodePen

[grizhlie]

Sorry guys, it's a super edge-case scenario that I explained rather poorly. Both replies helped me though. 

 

Since creating the post/query I have changed how the routing, rendering and how other things work and between all the changes everything works like I wanted it now. 

 

13 hours ago, PointC said:

I'm not really sure I follow the question. If the element is already past the start trigger, it's going to play. It sounds like maybe you want a different ScrollTrigger for desktop and mobile? 

 

Have you seen the .matchMedia() method?

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

 

Or, if you want something to wait, you can always use a delayedCall.

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

 

Does that help? Or maybe I'm missing the objective altogether. 

 

Happy tweening.

 

Thanks this was really useful. I somehow forgot about matchMedia and this will actually help me with another project.

 

Delayed call is new to me, I'll play around with it to learn it.

 

 

13 hours ago, Cassie said:

Maybe you just want to change the start marker position? Like so?

Embarrassed to say but trigger: body, start: 0 would also have solved my initial problem 😌🔫 ....

 

I have only really used these kind of starts that used the element as trigger. start: "top 50%"

 

Thanks guys, learned a ton of different ways to solve this (other other) issue from your responses and my mistakes 😅

 

Much appreciated!!!