Jump to content
Search Community

Multiple timeline animations with ScrollTrigger

Martagnan test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

  • Solution

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

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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.

 

 

  • Like 2
Link to comment
Share on other sites

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

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

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...