[Need help with GSAP ScrollTrigger Image Sequence]

Requirements:

We have Image sequence of background animation, We want freelancer who can sync text with the background  at specific location. 

Similar to this:

 But using this approach:

https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/?do=findComment&comment=121602&_backrid=93563

 

[AirPods image sequence animation using ScrollTrigger]

See the Pen NWbXwPE?editors=1001 by nikhiltyagicse (@nikhiltyagicse) on CodePen

1)

In Your Code

// Create the background image animation - this needs to come first
for (let i = 0; i < frameCount; i++) {
  // Show the image briefly
  tl.to(frameImages[i], {opacity: 1}, i);

  // Hide the image after a bit
  if(i !== frameCount - 1) {
    tl.to(frameImages[i], {opacity: 0}, i + 1);
  }
}

I want to use canvas to display hide images, how can i do that,

 

2) startpercent, endpercent

Small Description, how to declare these value correctly;

Example: i have a animation of duration :75,  If i want to start first animation at 0.3 sec and end at 0.5 sec.

What is the best way to calculate. 

 

3) Declare startScrollTL

I need help in declaring startScrollTL

 

What am i doing wrong?

 

Pls help, i am trying this from many days, aligning text and bg images, Any help/ guidance would be appreciated

[AirPods image sequence animation using ScrollTrigger]

On 8/19/2020 at 6:41 PM, ZachSaucier said:

For what it's worth, I did something similar to the Apple site for a client. I tried two approaches, both using individual img elements (not a sprite) positioned fixed behind the normal content.

 

The first I tried to create animations and ScrollTriggers for each section of the page and then sync those to the correct timing with the background images. While this worked (and was easier to get pinning working), it proved to be quite difficult to keep things synced on different viewports. I had a lot of conditional values that depended on breakpoints. And when I updated the height of one section, the timings of the other sections would get thrown off. Not optimal.

 

The second approach, and the one we went with in the end, is making use of one big timeline for both the background images and and animations of the content. We fixed the position of the content as well and just used the timeline to reveal, "pin" (it's a fake pin just positioning things in the same place for a bit), and hide the content. I used set percentages (hand picked) for each animation so that it stays perfectly synced with the background images. I also allowed other configuration parameters (like ease, distance of translation, etc.) to be set via data attributes and used for the animations for that element. CustomEase was a big help. For some reason it helped certain browsers to use really short tweens for the background image displaying vs .set()s. The basic setup is as follows:

const tl = gsap.timeline({
  defaults: { duration: 0.0001 }, 
  paused: true,
  scrollTrigger: { 
    // ... 
  }
});

// Create the background image animation - this needs to come first
for (let i = 0; i < frameCount; i++) {
  // Show the image briefly
  tl.to(frameImages[i], {opacity: 1}, i);

  // Hide the image after a bit
  if(i !== frameCount - 1) {
    tl.to(frameImages[i], {opacity: 0}, i + 1);
  }
}

// Get the duration of the timeline to use for our positioning
const TLDur = tl.duration();

// Create the animations for each section 
myElems.forEach((elem, i) => {
  // Set things up
  const myStartTime = elem.dataset.startpercent/100 * TLDur;
  const myDur = (elem.dataset.endpercent - elem.dataset.startpercent)/100 * TLDur;

  // Get other parameters here

  gsap.set(elem, {
    position: 'fixed',
    // Other styles set here
  });

  // Animate the position and autoAlpha separately for more fine control
  startScrollTL.fromTo(elem, {
    autoAlpha: 1
  }, {
    autoAlpha: 0,
    duration: myDur,
    // I used a modified slow ease with yoyoMode: true to go in and out in one tween for this ease
    // https://greensock.com/docs/v3/Eases/SlowMo
    ease: myAlphaEase
  }, myStartTime)
  .to(elem, {
    // I only animated y here but you can do whatever
    y: () => `-${elem.dataset.endy - elem.dataset.starty}vh`,
    duration: myDur,
    ease: myYEase
  }, myStartTime)
});

 

Is there any demo related to this code