AirPods image sequence animation using ScrollTrigger

[OSUblake]

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.

 

[GreenSock]

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

[sebkup]

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

[Cassie]

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?

[sebkup]

@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? 

[Cassie]

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

[loganvenderlic]

Hey guys, I've been working on setting up my own image sequence animations using ScrollTrigger and a method based on what @OSUblake already included in this thread.

 

One issue I keep running into, though...I have one animation that I want to run twice during scroll, using two different triggers. It works fine on desktop, but on mobile, the first time it is supposed to run, it often runs too soon or is on a weird frame other than the first frame before I reach my trigger.

 

Oftentimes, if I scroll past it, scroll back up, and then scroll back down, it works fine again. Here's a link to the project I'm working on: https://plantd.webflow.io/dev/product-copy-7-gsap-forum

 

The element I'm animating is the #init-canvas <canvas> and its first trigger is #init-gsap.

 

Can anyone offer any insight?

 

By the way, I'm not sure if I have it set up correctly in my javascript to run the same animation twice and be triggered by two different triggers.

 

Here's the gsap js I'm using (I can send more if you need it, or you can find all of my gsap js in the .gsap-scripts element near the bottom of the page):

 

gsap.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  scrollTrigger: {
trigger: "#init-gsap",
start: "top top",
end: "bottom top",
    scrub: true
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

gsap.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  scrollTrigger: {
trigger: "#init-2",
start: "top top",
end: "bottom top",
    scrub: true
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

 

 

Let me know if there's a better way I should be doing that! Thanks in advance for any help anyone can provide!

 

[Rodrigo]

Hi @loganvenderlic and welcome to the GreenSock forums!

 

If possible create a minimal demo that clearly illustrates the issue you're having. Besides the fact that you're not resetting the frame between both animations I can't see any issue in your code.

 

The one advice I could give you is to create just one animation and then create the two ScrollTrigger instances where both use the same animation, since you're using the same target:

const airPodsTween = gsap.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  onUpdate: render, // use animation onUpdate instead of scrollTrigger's onUpdate
});

const stOne = ScrollTrigger.create({
  trigger: "#init-gsap",
  start: "top top",
  end: "bottom top",
  scrub: true,
  animation: airPodsTween,
});

const stTwo = ScrollTrigger.create({
  trigger: "#init-2",
  start: "top top",
  end: "bottom top",
  scrub: true,
  animation: airPodsTween,
});

 

Happy Tweening!

[loganvenderlic]

Thanks so much @Rodrigo. I will definitely try your suggestion of using one animation for two ScrollTrigger animations.

 

I can also try to put together a simpler demo, but I'm in the middle of trying to meet a deadline of Friday for this project so I'm in a bit of a rush! One thing I just noticed is that I enabled Markers for the first one that is supposed to be triggered by #init-gsap.

 

The markers are significantly off where I expect them to be! Check out the link again https://plantd.webflow.io/dev/product-copy-7-gsap-forum or see my attached screenshot.

 

It's supposed to be triggered by #init-gsap and I set it to start: top top. However, #init-gsap is over 300px below the Start marker. Do you know why this could be happening?

 

I do have some elements on the page using negative margin-top...could that be it?

 

Also, the container elements for my canvas animations are all set to position: sticky with negative margin so they overlap. I don't know if that could be part of the issue?

 

Thanks again for your help!

 

[loganvenderlic]

@Rodrigo just another heads up that I've noticed this marker placement be inconsistent. Sometimes when I refresh the page it is correct! Screenshot attached. 

 

I don't know why it isn't the same every time...

[Rodrigo]

Hi,

 

The link you provided is password secured. On top of that exploring full production code is beyond the time resources we have in these free forums, that's why we ask for a minimal demo.

1 hour ago, loganvenderlic said:

It's supposed to be triggered by #init-gsap and I set it to start: top top. However, #init-gsap is over 300px below the Start marker. Do you know why this could be happening?

 

Something is definitely shifting your layout, most likely images or ajax served content. Be sure to load everything before creating your ScrollTrigger instances, same with custom fonts.

1 hour ago, loganvenderlic said:

I do have some elements on the page using negative margin-top...could that be it?

It could be as well

 

1 hour ago, loganvenderlic said:

Also, the container elements for my canvas animations are all set to position: sticky with negative margin so they overlap. I don't know if that could be part of the issue?

Again, without a minimal demo is hard to tell, but is a possibility. This also brings a question: If you need to overlap the canvas elements for animation purposes, why not create a single canvas element?

 

Happy Tweening!

[loganvenderlic]

@Rodrigo whoops-- forgot it was password protected! Anyways, thanks so much for your thoughts and suggestions. I found a couple images that were lazyloading that I believe were the culprit! Once I set them to load with the page things have been lining up correctly!

 

Thanks again for all of your help and insight!

[Rodrigo]

No problemo @loganvenderlic!

 

Good to hear that is solved 🎉

 

Happy Tweening!

[loganvenderlic]

Can anyone help explain a specific line of @OSUblake's CodePen here? 

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

 

What is the snap: "frame" line achieving in his gsap.to ? There isn't a snap property in the gsap.to docs (https://greensock.com/docs/v3/GSAP/gsap.to()). Is this the same as the .snap utility method? https://greensock.com/docs/v3/GSAP/UtilityMethods/snap()

 

I've been going through his code line by line and that is the one line I'm still confused about. Any help would be greatly appreciated!

 

And thanks to @OSUblake for this great pen! It was instrumental in helping me create my own animations for a client that I'm really happy with.

[Cassie]

Sure - this is using snap functionality built into GSAP,

You can see more here

 

https://greensock.com/docs/v3/GSAP/CorePlugins/SnapPlugin

[loganvenderlic]

@Cassie awesome, thank you so much!!

[GreenSock]

Just circling back here to follow up with a little helper function that makes this easier: 

See the Pen VwgevYW?editors=0010 by GreenSock (@GreenSock) on CodePen