Jump to content
GreenSock

RandallHolbrook

scrollTrigger: I need help with section fade-in/fade/out

Recommended Posts

Posted (edited)
57 minutes ago, akapowl said:

 

Hello there @Claire

 

Looks like you've only got a typo in your CSS - you forgot the leading dot on the .panel class here which sets all but the first panel to hidden

 

panel:not(.first) {
  opacity: 0;
  visibility: hidden;
}

 

 

 

 

Thank you very much @akapowl!!! I'm sorry for my embarassing mistake, thank you!!! 
Now I can proceed to implement this in my project...!
Thank you again!

But now, when I try to put in my project, I've got this error:

self.previous is not a function
the version of GSAP I'm using is 3.10.4
any idea?



 

Immagine 2022-06-01 141146.png

Edited by Claire
added error
Link to comment
Share on other sites

11 minutes ago, Claire said:

Thank you very much @akapowl!!! I'm sorry for my embarassing mistake, thank you!!! 

 

No worries, it happens to everyone! A second set of eyes is always helpful.

 

12 minutes ago, Claire said:

But now, when I try to put in my project, I've got this error:

self.previous is not a function
the version of GSAP I'm using is 3.10.4
any idea?

 

It is really hard to tell from just a screenshot - there are just too many possibilities for what could be causing that. Maybe you are loading your files/trying to access elements before the DOM is ready? Are you maybe using React? WordPress? Some build tools? 

 

The GSAP version most definitely is not the problem though, as the codepen demos use the same version.

 

If you can provide a very simple CodePen or CodeSandbox that demonstrates the issue, you'll siginificantly increase your chances on getting a solid answer.

 

  • Like 1
Link to comment
Share on other sites

53 minutes ago, akapowl said:

 

No worries, it happens to everyone! A second set of eyes is always helpful.

 

 

It is really hard to tell from just a screenshot - there are just too many possibilities for what could be causing that. Maybe you are loading your files/trying to access elements before the DOM is ready? Are you maybe using React? WordPress? Some build tools? 

 

The GSAP version most definitely is not the problem though, as the codepen demos use the same version.

 

If you can provide a very simple CodePen or CodeSandbox that demonstrates the issue, you'll siginificantly increase your chances on getting a solid answer.

 

@akapowl thank to your advice, I've checked my code on my CodeSandbox and I've notice that, initially, I wasn't able to reproduce the error.😕
So I've checked the GSAP e and ScrollTrigger version I was using in the project:

GSAP 3.10.4 and ScrollTrigger 3.3.4:
    /*!
     * ScrollTrigger 3.3.4
     * https://greensock.com
     *
     * @license Copyright 2008-2020, GreenSock. All rights reserved.
     * Subject to the terms at https://greensock.com/standard-license or for
     * Club GreenSock members, the agreement issued with that membership.
     * @author: Jack Doyle, jack@greensock.com
    */

 

So, I've decided to change the ScrollTrigger version, because in the sandbox the version 3.10.4 was working properly.
In conclusion, I've reproduced the issue creating a file that contains the exact copy of the scrolltrigger I was using and I've solved my problem changing the ScrollTrigger version.
Now your code works perfectly, the self.previous().end is no more an error.
(I've also checked the other animations in my website and this version change seems not affected them).
 

(My project is very simple: Vanilla Js and Bootstrap as Css Framework, nothing special.)


Hope this can help someone, and @akapowl... not enough words to thank you. Hug from Italy!🥰

 

  • Like 1
Link to comment
Share on other sites

2 minutes ago, akapowl said:

Oh yes, .previous() was added in ScrollTrigger version 3.8.0

 

In case you didn't know, you can see when something was added in the docs, right below the h1.

 

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

 

And it's always best to keep the versions in sync.

Glad you figured it out :) Happy tweening!

 

Unbenannt.thumb.png.e64df4899c31f5e5dbe8396a1f8afe6d.png

 

Thank you, I've got no idea there was that notice in the docs, maybe I've could find the solution before disturbing you!🥶 I'll check for them in future.
And I will pay attention to have my versions in sync too.😤
Ok @akapowl, hope you have a nice w-e, and again, thank you, You have saved my day!!!.🥰
 

  • Like 2
Link to comment
Share on other sites

7 minutes ago, Claire said:

Thank you, I've got no idea there was that notice in the docs, maybe I've could find the solution before disturbing you!🥶

 

You're very welcome - and again; no worries, we're here to help :) 

Have a good one, too!

  • Like 2
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.
×