Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
battleaxe10000

How do I run stagger animation only once

Recommended Posts

Hi,

I'm trying to make a stagger effect on the landingpage.

The idea is, that the stagger displays when the user enters the site, and then no more.

The problem is when you click on a link and then get back to the landingpage. The landingpage will then reload and play the animation again (which it shouldn't).

I tried with "window.onload = function(){}". This works regarding only loading once, but in regard it completely removes the wanted background (since the animation doesn't run).

 

So, with this in mind, I should have an animation that run once, and then stays in that "after run" state.

I'm thinking something like:

const [hasRun, setHasRun] = useState(false);
inside the onload function:
setHasRun(true)

But this feels a bit hacky.

 

This is not the first time I encounter this problem, so I would really appreciate some help to solve this.

Thank you very much!

 

https://codesandbox.io/s/gsap-satgger-1usqn

Link to comment
Share on other sites

I thought I could share the solution I did to this, if anyone else needs it.

 

In my Home.js:

const Home = () => {
    const [loading, setLoading] = useState(false);

    window.onload = function () {
        gsap.to('#first', { duration: 1.3, delay: .1, top: '0', ease: 'Expo.easeInOut' })
        gsap.to('#second', { duration: 1.3, delay: .3, top: '0', ease: 'Expo.easeInOut' })
        gsap.to('#third', { duration: 1.3, delay: .6, top: '0', ease: 'Expo.easeInOut' })
        gsap.to('#fourth', { duration: 1.3, delay: .9, top: '0', ease: 'Expo.easeInOut' })
        gsap.fromTo('#innerSection', 1.3, { opacity: 0, scale: 0.2 }, { opacity: 1, scale: 1 }, 2)
        setLoading(true)
    }

    return (
        <Section loading={loading}>
            <Overlays id="first" />
            <Overlays id="second" />
            <Overlays id="third" />
            <Overlays id="fourth" />
        </Section>
    )
}

 

I am using Styled-Components, so in my style-file:

background: ${({ loading }) => (loading ? "tranparent" : "black")};
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.
×