Martagnan Posted July 28, 2021 Share Posted July 28, 2021 Hello, I'm not sure where to start with this. I have a page with multiple sections and I would like the animation to 'alternate' with each section. Section one - image slides in from left, text from the right Section two - image slides in from right, text from the left etc... Very similar to this See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen but this code looks really complicated to me and for what i'm trying to achieve!? Do I need multiple timelines, multiple triggers or is there a clever forEach way of doing this? Many thanks for any advice. M See the Pen yLbvdzB by Martagnan (@Martagnan) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted July 28, 2021 Solution Share Posted July 28, 2021 Ah yeah, that solution is complex because it's got different reveal animations. What about something like this? I adjusted your markup so that you don't have to worry about which item is on the left or right. There's just a left column and a right column. and those columns animate the same no matter what's in them See the Pen YzVaPvM?editors=1010 by GreenSock (@GreenSock) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Carl Posted July 28, 2021 Share Posted July 28, 2021 Yeah, changing the html is for sure the easiest win here. This demo from my course ScrollTrigger Express has a similar exercise that uses flexbox to swap the order of the items. Here is one of the demos See the Pen jOBpWzz?editors=0100 by snorkltv (@snorkltv) on CodePen If you want a full video explanation of how it works, check out the course https://www.creativecodingclub.com/courses/scrolltrigger-express The "responsive scroll-driven animation" video on that page shows how we make it adapt to a single-column layout as well. 2 Link to comment Share on other sites More sharing options...
Martagnan Posted July 28, 2021 Author Share Posted July 28, 2021 Many thanks Cassie, I can now build off this. Thanks also Carl, i'll take a look at the video. Awesome forum! M 1 Link to comment Share on other sites More sharing options...
Cassie Posted July 28, 2021 Share Posted July 28, 2021 Hey @Martagnan, you're not the first newbie to get stuck there. Check out the 'not using loops' section of this article 3 Link to comment Share on other sites More sharing options...
Martagnan Posted July 30, 2021 Author Share Posted July 30, 2021 Hello again, I settled on this solution but as the build continued a couple of issues came to light 😕 1. I need more control over the individual elements. For example, i'd like the H2, figure and Paragraph to have their own tweens within the timeline. At the moment it's only animating the two immediate children of .servicePanel (no access to the individual elements). 2. When this solution is embedded into a CMS I would need to write some logic to 'flip' the HTML accordingly. I started experimenting with the following but ended up (as expected) back where I started where the '.servicePanel .even' images are scrolling in from the wrong side 😕 See the Pen oNWdGMK by Martagnan (@Martagnan) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted July 30, 2021 Share Posted July 30, 2021 Heya! This is looking nice, good job on targeting the correct elements. You can use function based values in your tweens which allow for conditional logic 🥳 I'm passing in an index value, checking if the index is even and then basing the direction off that value. You also had a pretty creative solution there for your scrollTrigger, you can just add a scrollTrigger to a timeline rather than controlling the timeline via callbacks. toggleActions allows you to specify how the timeline will be managed at different toggle points. See the Pen NWjMXNV?editors=1011 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
Martagnan Posted July 30, 2021 Author Share Posted July 30, 2021 Cassie, that is awesome! I don't think i'd have ever got to that solution! Thank you. This actually might also answer another problem i'll be tackling next week. 2 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