Airpod Pro like website

[apsuva]

Hello

 

I am trying to create airpod pro like website with greensock. Problem is hero text timing. For example, total number of scrollable images is 1500. I want to show text on the 1200th images. how can I do that? 

 

Second problem, i will create multiple canvas in one page. because i have 4 different image sequence. 

https://airpod-pro-roia.webflow.io/

Is there any full example like webflow site? thanks for answers. I hope you understand what I mean 😊

 

[GreenSock]

I'd probably set up an object with a getter/setter property that'll control the progress of the images, sorta like: 

const ImageSequence = {
  _frame: 0,
  _totalFrames: 1500,
  frame(value) {
    if (arguments.length) {
      this._frame = Math.round(value);
      // do rendering to canvas here...
    }
    return this._frame;
  }
};

That way, you can just animate the ImageSequence.frame and it'll render accordingly. 

 

And in your timeline, you can easily set up your tweens:

let tl = gsap.timeline({
  scrollTrigger: {
    scrub: true,
    ...
  }
});
tl.to(ImageSequence, {
  frame: 1500,
  duration: 1500, // to make it easy to calculate, use 1 second for each frame. We're scrubbing, so duration isn't actually tied to seconds
  ease: "none"
});
tl.to(yourText, {...}, 1200); // start the animation at frame 1200

There are a lot of ways to do it, I'm just offering one. I hope that helps!

[apsuva]

Thank you for answer

 

I'm trying to do it this way. What am I forgetting? Can you help on this way please? Thanks

 

See the Pen oNeeqOQ by apsuva (@apsuva) on CodePen

[GreenSock]

Did you have a GSAP-specific question we could help with? I'm not quite sure what you're asking here. It looks like you're using Lottie (not a GreenSock product). That's fine, but performance may suffer compared to using regular <canvas>. It may be totally fine, though, for what you're doing. 

 

We really try to keep these forums focused on GSAP-specific questions (please read the forum guidelines). If you need help with general logic issues or <canvas> questions, etc., you are welcome to post in the "Jobs & Freelance" forum to see if you can hire someone for that. 

[apsuva]

Sorry..

 

This is an example I saw on this forum. I was trying canvas when I ask question. I don't know exactly what to do. I don't expect anyone to write code for me. That's why I didn't want to add codepen at first. That's why I don't want ask for help. Sorry for question.

[GreenSock]

No problem. We're generally very open to questions around here and don't worry - you haven't offended anyone. I apologize if I didn't quite understand what you wanted here. If you still need any GSAP-related help, you are totally welcome to post your question here. And canvas is a great option for what you described.