Jump to content
Search Community

Fullpage animation by gsap

Али К test
Moderator Tag

Recommended Posts

 

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.

 

  • Like 4
Link to comment
Share on other sites

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

The steps for how to create any ScrollTrigger animation:

  1. 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.
  2. 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

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.
×
×
  • Create New...