Али К Posted January 20, 2021 Share Posted January 20, 2021 Hey there, Is it possible to create a "fullpage animation " by gsap? example. Thanks Link to comment Share on other sites More sharing options...
akapowl Posted January 20, 2021 Share Posted January 20, 2021 Hey @Ali Manuel That page actually uses GSAP 3.5.1 and ScrollTrigger. The answer to that question of yours depends on which animation it exactly is on that page, you are referring to. For the text-block on the left for example: Sure, pretty much doable with just HTML, CSS and the use of GSAP, triggering the animation on scroll with ScrollTrigger ( they are setting overflow: hidden to the page's body in between those 'full-page-like'-transitions, to prevent users from scrolling further, before those time-sensitive transitions have finished ) For the 3D-Background: GSAP itself is not designed/intended to create effects as such - but you can definitely control those by using GSAP. For creating something like that in the first place, you'd have to make use of WebGL. That site you linked to uses three.js. Hope this helps. Oh, and welcome to the forums Cheers. 4 Link to comment Share on other sites More sharing options...
Али К Posted January 20, 2021 Author Share Posted January 20, 2021 Hello @akapowl , thank you. did you have an example about this Quote they are setting overflow: hidden to the page in between those 'full-page-like'-transitions, to prevent users from scrolling further, before those time-sensitive transitions have finished Link to comment Share on other sites More sharing options...
akapowl Posted January 20, 2021 Share Posted January 20, 2021 There is one in this thread here 2 Link to comment Share on other sites More sharing options...
Али К Posted January 26, 2021 Author Share Posted January 26, 2021 @akapowl how it is possible here ? See the Pen gOwVwMV by itsalimanuel (@itsalimanuel) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 Hey Ali. You're passing in a timeline to your callbacks (like onEnter, etc.). Callbacks can only be passed functions so you probably want to pass in something like this: onEnter: () => s2_enter.play() Reading the docs or looking more closely at the demo that akapowl shared can teach you about that Link to comment Share on other sites More sharing options...
Али К Posted January 26, 2021 Author Share Posted January 26, 2021 Hey Zach , well it's not working i tried it Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 I'm not sure why you're attempting to use the callbacks at all. Using just the toggleActions does what I think you're wanting: See the Pen MWjNpqO?editors=0010 by GreenSock (@GreenSock) on CodePen Perhaps it'd help you to go through the ScrollTrigger docs and intro video again. Link to comment Share on other sites More sharing options...
Али К Posted January 26, 2021 Author Share Posted January 26, 2021 @ZachSaucier no , what i want it's another effect , it's like this See the Pen bGVdQmM by japortegijs (@japortegijs) on CodePen just the problem here , because this effect with scrollMagic and i don't want to use it Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 26, 2021 Share Posted January 26, 2021 The steps for how to create any ScrollTrigger animation: Create your animation as you want it to behave. In this case it probably makes sense to create a timeline that animates in your elements in a sequence. Attach that animation to a ScrollTrigger, adjusting the start, end, and other properties are you need to. That's it How about you try doing those steps in that order with your demo? If you have a specific question let us know and we'll do our best to answer it. Link to comment Share on other sites More sharing options...
GreenSock Posted January 26, 2021 Share Posted January 26, 2021 I figured it might be useful to see it converted to ScrollTrigger so that you could study it. Look how much simpler the code is: See the Pen ccb4c35c8a930f827383f09e15f3b052?editors=0010 by GreenSock (@GreenSock) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Али К Posted January 26, 2021 Author Share Posted January 26, 2021 Thank you @GreenSock 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now