Jump to content
GreenSock

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

Play animation according to the scroll - TimelineMax

Recommended Posts

How to play animation (timeline1 with many .from and .to animations) when appears on screen or in X scroll height?

Link to comment
Share on other sites

Hi there!

You're probably looking for scrollTrigger - 

 

Link to comment
Share on other sites

33 minutes ago, Cassie said:

Hi there!

You're probably looking for scrollTrigger - 

 

This is the timeline I created:

 

let timeline2 = new TimelineMax ();

 

        timeline2

 

        .from ('.grid', 1 , {

            opacity: 0,

        })

 

And this is what I need (

See the Pen wvaxKEM by GreenSock (@GreenSock) on CodePen

), but it's not working don't know why.

Maybe deprecated or I'm just being a noobie?

Link to comment
Share on other sites

I don't see any mention of scrolltrigger in that code you pasted in.

We can usually help more effectively if you provide a minimal demo though, codepen is great for this.

If you haven't used codepen before, here's a post explaining how.

Link to comment
Share on other sites

13 minutes ago, Cassie said:

I don't see any mention of scrolltrigger in that code you pasted in.

We can usually help more effectively if you provide a minimal demo though, codepen is great for this.

If you haven't used codepen before, here's a post explaining how.

See the Pen PopZJwp by NLopesx (@NLopesx) on CodePen

 

This is my example.

 

I need a function(I don't know if it works with a function) that plays the timeline2 at the X scroll position like the first code pen example.

Link to comment
Share on other sites

Ok, so all you've done is include scrolltrigger in your JS panel, you haven't actually written any scrolltrigger code. So nothing's going to happen!

here's the docs - why don't you take a little look and try to implement a scrolltrigger? If you get stuck we can help ☺️

Also, you're using old GSAP 2 syntax, We definitely recommend that you learn and use GSAP 3
 

  • Like 1
Link to comment
Share on other sites

Here's a quick fork that should get you moving in the right direction. I didn't update all your code to v3 syntax. 

See the Pen 22cd1c64115a6b12e914a6fbf3d5c77c?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'd very much agree with Cassie's advice to read the docs and try figuring things out yourself because you'll learn a lot more that way. 👍

 

Good luck!

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