Jump to content
Search Community

ScrollTrigger based on airpods but with multiple sections

Chris Bartlett test
Moderator Tag

Recommended Posts

Hi,

I'm new to Greensock and think it's absolutely fantastic! I'm trying to do something similar to Apple Airpods which was based on this post:
https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/

The idea is I want several products on one page and as you scroll down it loops through the images the same as Airpods and displays some text. It works fine for one product but when I add a second it overlays them on top - I'm presuming as I'm using position fixed - but I'm wondering why they are triggering at the same time and not after each other?

I know I have messed something up quite badly and wondered if anyone knew what?

Thanks!
Chris

See the Pen JjbxYpW by _chris_bartlett (@_chris_bartlett) on CodePen

Link to comment
Share on other sites

Hi Chris! 😊

Glad you're enjoying GSAP.

The main issue you have here is that you're using a tween ( gsap.to ) instead of adding tweens to a timeline. In order to get sequenced animations you have to pop tweens onto a timeline. Timelines act like a container for your tweens and allow you to sequence them! Super powerful stuff.

 

This tweak doesn't entirely fix your problem - but it's a step in the right direction.

See the Pen 5c5206d9aa66ec987eecda2ac1cefcd0?editors=0010 by cassie-codes (@cassie-codes) on CodePen



The second issue (and the reason the above fix isn't quite perfect) is that you're using both CSS animations and GSAP. You *can* do this, but it's more trouble than it's worth, if you're already using a GSAP timeline it's a lot easier to go all in and pop everything on it - then you have single source of truth for animations, tweens that you can position nicely and much tidier code. Aside from the docs I linked to this article is a great place to start. 


I hope this helps. As you're new to GSAP I would suggest starting with breaking it down and focusing on the text timeline first - then adding in the images. It would certainly be easier to work out what's going on.

 

 

 

  • Like 5
Link to comment
Share on other sites

Hi Cassie, 

 

Thanks very much for your advice! Will look into that let you know how I got on. 

 

I was using css animation as wasn't sure on how to add it lol I got it working using gsap but couldn't figure out how to do the timing right (they want it on certain images). 

 

Thanks! 

Link to comment
Share on other sites

Hi Cassie,

That was great - thanks! It worked well. I now have it working fine scrolling down but now just have to figure out how to reverse it so when you scroll back up. I think the main problem is I'm adding the tweens at certain image frame points?




So I guess i need to do something like this:

See the Pen pojzxwZ by GreenSock (@GreenSock) on CodePen



Just trying to figure out what? haha Wondering whether i need a separate timeline? One for onEnter and one for onEnterBack?

Link to comment
Share on other sites

Hey Chris. You don't want to be adding new tweens to the timeline every single time the tween updates. What's best is to create the animations that you need and attach them to the timeline at the start then let ScrollTrigger handle the rest (or use control methods if you need manual control as covered in the animating efficiently article). 

 

You could use multiple ScrollTriggers do to that (like the demo in this post) or you could attach them to a timeline connected to the main ScrollTrigger.

 

Side note: You're making at least one of the common GSAP mistakes and we recommend fixing it. 

  • Like 3
Link to comment
Share on other sites

Hi Zach,

Thanks for your help! Yes I thought it was probably wrong to add it to the rend method but it was the only way I could get it to play 😬

I started off using the post you mentioned. And if I use that approach it worked well - but the timing was wrong. They would like the text to appear at certain images in the animation and that is the bit that is really confusing me. 

I will attempt to change it and let you know how I get on!

Thanks

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...