NLopesx Posted May 12, 2021 Share Posted May 12, 2021 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 More sharing options...
Cassie Posted May 12, 2021 Share Posted May 12, 2021 Hi there! You're probably looking for scrollTrigger - Link to comment Share on other sites More sharing options...
NLopesx Posted May 12, 2021 Author Share Posted May 12, 2021 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 More sharing options...
Cassie Posted May 12, 2021 Share Posted May 12, 2021 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 More sharing options...
NLopesx Posted May 12, 2021 Author Share Posted May 12, 2021 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 More sharing options...
Cassie Posted May 12, 2021 Share Posted May 12, 2021 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 12, 2021 Share Posted May 12, 2021 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! 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