Mustafeez Posted November 3, 2020 Share Posted November 3, 2020 Hi, I am actually trying to achieve pin one of the sections and within that pinned section the elements get animate-in and out on scroll but without scrubbing. The section is Purple. Here's the demo which I am trying to achieve https://appshah.com See the Pen vYKrjPP by mustafeez121 (@mustafeez121) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 Hey Mustafeez. What's wrong with the demo that you posted above? It seems to match the intended goal as you provided it as far as I'm understanding. Link to comment Share on other sites More sharing options...
Mustafeez Posted November 4, 2020 Author Share Posted November 4, 2020 Hey, I actually tried and still trying to achieve something like to pin a section and within that pin sectioned elements to get animated right after other which can be achieved by timeline BUT the problem is that I want to controll the animation with scroll trigger, like first element within pinned section animate automatically But the 2nd element should be animate when I scroll down my mouse wheel instead of starts automatically right after completion of first element animation. You can see here what I actually trying to achieve https://appshah.com Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 13 minutes ago, Mustafeez said: You can see here what I actually trying to achieve https://appshah.com There are a ton of animations on that page so you'll have to me more specific. 14 minutes ago, Mustafeez said: first element within pinned section animate automatically But the 2nd element should be animate when I scroll down my mouse wheel instead of starts automatically right after completion of first element animation. Sounds like you need two ScrollTriggers: one for the first animation and one for the second. The first one without scrub, the second with scrub. I think it'd be helpful if you made your demo more minimal - just focused on what you're asking your question about, everything else removed. Link to comment Share on other sites More sharing options...
Mustafeez Posted November 4, 2020 Author Share Posted November 4, 2020 (edited) Okay then should I share another pen here with more specific code or start a new thread? Edited November 4, 2020 by Mustafeez Misspelled Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 4, 2020 Share Posted November 4, 2020 Sharing here is fine. Link to comment Share on other sites More sharing options...
Mustafeez Posted November 4, 2020 Author Share Posted November 4, 2020 Hey Zach, here is the more specific pen. Here you can find 02 sections. The 2nd section is pinned where two lines get animate once the section got pinned. I want the 2nd line element animation to be done When I use my mouse scroll instead of doing automatically right after 1st line animation. Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted November 4, 2020 Solution Share Posted November 4, 2020 Are you wanting something like this? See the Pen pobZjzK?editors=0010 by GreenSock (@GreenSock) on CodePen Or like this? See the Pen PozBPNj?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Mustafeez Posted November 4, 2020 Author Share Posted November 4, 2020 Yes! that's what I am looking for (the 2nd ones) Thanks so much. 😃 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