TrulyNewbie Posted November 18, 2021 Share Posted November 18, 2021 Hi, So I have 3 identical divs (with different content), and I want an animation to play when each div is scrolled into view, and a different animation when it's scrolled out of view. I tried so many ways but I just can't seem to get the correct code. Thank you in advance See the Pen LYjqryM by NewbieRuby (@NewbieRuby) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 18, 2021 Share Posted November 18, 2021 Hey @TrulyNewbie This demo might be what you're after? See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
TrulyNewbie Posted November 18, 2021 Author Share Posted November 18, 2021 Hi @Cassie I don't think it is. To be honest I'm a little confused with the function elem part. I'm going to play around with it and try and figure it out. Thank you for your help Link to comment Share on other sites More sharing options...
Solution Cassie Posted November 18, 2021 Solution Share Posted November 18, 2021 Yeah - It is a little confusing with the directional stuff, sorry about that - but it's the right approach. Take a look - See the Pen abyXRvY?editors=1010 by GreenSock (@GreenSock) on CodePen You need to loop around the sections and create a scrollTrigger for each one - then you can create different animations 'onEnter' or 'onEnterBack' that are specific to that section. I've done the first part for you - if you compare this demo and the previous one you should be able to create your second animation ✨ Let me know if anything's unclear! 1 1 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted November 18, 2021 Author Share Posted November 18, 2021 Thank you thank you thank you! It works perfectly! Thanks again ✨ @Cassie 2 Link to comment Share on other sites More sharing options...
TrulyNewbie Posted November 18, 2021 Author Share Posted November 18, 2021 Sorry.. I do have one more question. Why wont my animation reset on EnterBack/LeaveBack? See the Pen gOxqEyv by NewbieRuby (@NewbieRuby) on CodePen Link to comment Share on other sites More sharing options...
TrulyNewbie Posted November 19, 2021 Author Share Posted November 19, 2021 Ok I think I've figured it out - See the Pen gOxqEyv by NewbieRuby (@NewbieRuby) on CodePen Thanks again! 1 Link to comment Share on other sites More sharing options...
Cassie Posted November 20, 2021 Share Posted November 20, 2021 Perfect solution! Nicely done 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