Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
apsuva

Airpod Pro like website

Recommended Posts

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 😊

 

Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

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