Vlad Tw Posted September 23, 2021 Share Posted September 23, 2021 Hi guys, hope you're having an amazing day! Mine not so much, as a gsap beginner. 🙄 I'm trying to add a stagger to the reveal animations of the elements that are positioned on the same level in the page ( y axis). More precisely, i want to add some delay between revealing the image and it's corresponding text. Any suggestions will help. Thank you! See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted September 23, 2021 Share Posted September 23, 2021 Hi Vlad - I can certainly help you with this. I'm just wondering if this is the best demo to be working on if you're learning. It's a bit of a complex example because it's demo-ing different animations depending on direction. Usually you'd be able to use the position parameter. Just wanted to check in case you're trying to learn about positioning and you've ended up down a rabbit hole you didn't intend to be down? If you'd like to carry on with this demo I'll try to comment it out to make it a little clearer. ☺️ 2 Link to comment Share on other sites More sharing options...
Vlad Tw Posted September 23, 2021 Author Share Posted September 23, 2021 Hi Cassie, thank you for your time! That's a nice point you have there. I 'learn' from so many places outside gsap, and the more i learned, the more i felt the need to learn. I got addicted to learning and that turned out not to be the most proficient way of moving forward. I switched a bit to be addicted to acting and then asking for feedback. This codepen seemed the right approach for me and i chose it as the way to implement such a reveal-on-scroll on a website, and i was hoping there is some small adjustment i could make to the current architecture to obtain the stagger effect. If however you think there is a better approach to obtain a similar centralized solution to handle such a reveal on scroll, please let me know. Again, thank you so much! Link to comment Share on other sites More sharing options...
Solution Cassie Posted September 24, 2021 Solution Share Posted September 24, 2021 Ok, cool. Glad I asked! So if you'd like to do a reveal on scroll, a basic version would be something like this See the Pen gORdWJm?editors=1010 by GreenSock (@GreenSock) on CodePen This will be nice and simple to adjust or add to for your use case. You can change the position parameter to adjust the stagger. Right now it's playing the second tween halfway though the first tween - '<50%' I've adjusted this one too. See the Pen mdwGRJm?editors=0010 by GreenSock (@GreenSock) on CodePen Following the structure already set out - I added a 'delay' class to any element that would be delayed.delay: elem.classList.contains("gs_delay") ? 0.3 : 0, Then in the tween params I'm checking for that class in a ternary and adding a delay if the class exists. This is a bit of a convoluted route though so I would recommend starting with the first pen and layering on any behaviour you need rather than starting with a complex solution and trying to wrangle it. 3 Link to comment Share on other sites More sharing options...
Vlad Tw Posted September 24, 2021 Author Share Posted September 24, 2021 Exactly what i was looking for! You're a life saver. Thanks a lot 💚 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 24, 2021 Share Posted September 24, 2021 No worries pal! Glad to have you onboard Club GreenSock too, hope you're enjoying the learning curve. 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