Jump to content


AirPods image sequence animation using ScrollTrigger

Moderator Tag

Recommended Posts

Welcome to the forums @Tishawn Fahie


If you need help, it's best to provide a minimal demo of the issue. This all can be done using pinnned sections liked you normally would with any other ScrollTrigger animations. There is nothing special about that animation, canvas is just an element like everything on the page.


  • Like 1
Link to comment
Share on other sites

On 3/31/2022 at 12:28 PM, Tishawn Fahie said:

This was exactly what I was looking for . Thank you for sharing - I know its a long shot since its a bit old but is there away to scroll to another section once the last text animation or frame animation is finished.  I created a new section and the background is white - but for some reason once the animation is finished I cant seem to scroll to the next section. For the life of me I cant seem to get it working. Position is set to fixed - I think thats the issue but am not sure what to do .

It'd be best to start a new thread and make sure you include a minimal demo that clearly illustrates the problem, @Tishawn Fahie. We'd be happy to answer any GSAP-specific questions. 👍

Link to comment
Share on other sites

  • 4 months later...

Hello everyone!
I'm trying create similar site to this air pods pro site by using GSAP and I would like to use this codepen example. On my site I have more longer texts which are displayed at a certain point on the animation and site is reaaaaaally long thats why I want use image frame and don't operate on div's height to display text in same way like on Apple site but I have no idea if is even possible to display timeline animation according to image frame.

My codepen example: 

See the Pen QWmrEav by sebkup (@sebkup) on CodePen

My codepen based on this examples: 

See the Pen LYNRrJY by make96 (@make96) on CodePen


See the Pen 5c5206d9aa66ec987eecda2ac1cefcd0 by cassie-codes (@cassie-codes) on CodePen

Thanks for any answer and help! And sorry if i did something wrong becouse is my first post on any forum...


Link to comment
Share on other sites

Hi there, welcome to the forums.


I'm afraid I'm not quite sure what the question is here though.


Maybe you're looking for the position parameter?

Link to comment
Share on other sites

@Cassie Thanks for answer! 

I mean, for example, when I'm scrolling site and for example when I'm on 65th frame I would like to display same texts animation on scroll like on Apple site. In my example all texts are on position fixed with 0 opacity, so its possible to display this kind of animation on this moment? 

Link to comment
Share on other sites

Are you familiar with timelines and the position parameter because that sounds just like structuring a timeline to me?

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.