Jump to content
Search Community

Do you need GSAP to animate .from() when the div enters the screen?

jrhager84 test
Moderator Tag

Recommended Posts

I'm just not sure if I still need Scrollmagic, as I haven't used GSAP in a really long time, and it seems (at least by looking) that you don't need SM to have simple .from() animations that say fade in a div from the left and from opacity 0 to 1 (like on the homepage elements as you scroll down). 

I'm setting up my dependencies, and just want to wrap my head around how to do it currently. Thanks in advance, and I apologize for my ignorance! :)

Link to comment
Share on other sites

Hey jrhager84 and welcome to the GreenSock forums! 

 

GreenSock is actually working on a scrolling plugin that will enable you to easily do things like this. But until that's released, you can use intersection observers or attach to the scroll event. I cover how pair an animation with the scroll position in the section titled "Use case: Animating based on the scroll position" of this CSS-Tricks article (I recommend reading the whole thing). You can fire the whole animation at once as well if you'd prefer. For more about using intersection observers, see this article.

  • Like 3
Link to comment
Share on other sites

So, the examples on the front page are using intersection observers? Or ScrollMagic? I just want fade-in animations to fire when the containers enter the screen, so that way I can animate sections when a user scrolls through the page. Which way is the easiest to set up? Thanks again!

Link to comment
Share on other sites

4 minutes ago, jrhager84 said:

the examples on the front page are using intersection observers?

They currently use intersection observers. 

 

5 minutes ago, jrhager84 said:

I just want fade-in animations to fire when the containers enter the screen, so that way I can animate sections when a user scrolls through the page.

Read the articles I linked to learn more about how to do it :) 

Link to comment
Share on other sites

15 minutes ago, ZachSaucier said:

They currently use intersection observers. 

 

Read the articles I linked to learn more about how to do it :) 

I took a look, and it seems the Intersection Observers are what I'm looking for. I really do appreciate the help! Is there a timeline for the scroll addition to GSAP? Weeks? Months? I'm building a website, and just want to do a bit of 'forward-thinking' to incorporate that in the future. You guys rock!

Link to comment
Share on other sites

  • 2 weeks later...
On 4/18/2020 at 2:47 PM, ZachSaucier said:

Hey jrhager84 and welcome to the GreenSock forums! 

 

GreenSock is actually working on a scrolling plugin that will enable you to easily do things like this. But until that's released, you can use intersection observers or attach to the scroll event. I cover how pair an animation with the scroll position in the section titled "Use case: Animating based on the scroll position" of this CSS-Tricks article (I recommend reading the whole thing). You can fire the whole animation at once as well if you'd prefer. For more about using intersection observers, see this article.

Any info about this plugin? At least the name of it, so we can bother you guys with questions about it :D

Link to comment
Share on other sites

On 5/4/2020 at 2:45 PM, ZachSaucier said:

You can just call it "the (GSAP) scroll plugin" for now. What questions do you have?

Well I assume there is still no exact date of release, maybe what is it capable of doing?
Can it animate elements on scroll, depending on scroll position, like we can do with ScrollMagic? 

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