Fade in Div and P text at a specific Frame with another scroll animation running

[mudimbapascal]

Im trying to Fade in Div and P text at a specific Frames like frame 130  and frame 200 with another scroll animation running.

Kindly help out.

See the Pen KKorEeE by scalstein (@scalstein) on CodePen

[GreenSock]

You could probably just convert the frame number into the associated scroll position and plug that into your ScrollTriggers: 

let frameTween = gsap.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  ease: "none",
  scrollTrigger: {
    scrub: 0.5
  },
  onUpdate: render
});
function frameToScroll(frame) {
  let start = frameTween.scrollTrigger.start,
      end = frameTween.scrollTrigger.end;
  return gsap.utils.mapRange(1, frameCount, start, end, frame);
}

Usage (assuming you create the frameTween FIRST so that it refreshes its start/end values first):

ScrollTrigger.create({
  start: frameToScroll(200);
  onEnter: () => gsap.to(...);
});

I hope that helps. 

[mudimbapascal]

I guess my explanation wasnt good enough.

i needed 

• Frame 130

Fade in Komfort5 logo komfort-5.svg  (smooth transition, fade-in from bottom to top, check arrow in PDF)

 

• Frame 200

Fade in Headline Perfekt passend with SVG icon_perfect-fit.svg

Fade in Points with Text

• • Verschiendene Weiten
  • Halbe Größen
  • Einfach verstellbar

 

• Frame 370

Fade in Headline Individuell angepasst with SVG customized.svg (keep headline and icon also for the next section, Frame 400)

Fade in Point with Text

• • Herausnehmbares Fussbett in allen Schuhen

 

• Frame 400

Fade in Point with Text

• • Herausnehmbares Fussbett in allen Schuhen

 

• Frame 640

Fade in Headline Gesund entlasten with SVG icon_ergonomic.svg

Fade in Points with Text

• • Ergonomische Einlegesohle
  • Abstützung des Mittelfussknochens
  • Verlängerte Hinterkappe

 

• Frame 875

Fade in Headline Weich dämpfend with SVG icon_soft.svg

Fade in Points with Text

• • Luft- und Schaumpolster eingearbeitet
  • Weichpolsterung an den Knöcheln

 

• Frame 1020

Fade in Headline Natürlich hochwertig with SVG icon_leather.svg

Fade in Points with Text

• • Feine Leder- und Stretchmaterialien aus Europa
  • Herstellung in Europa unter Einsparung wichtiger, naturbasierter Ressourcen

 

• Frame 1112

Fade in Solidus logo logo_white.svg

[Cassie]

Hey there - just stepping in to explain that these forums aren't for asking people to do your work for you.

There's a very small team of mods here trying to answer questions about the GSAP API, we can't take lists of requirements and craft solutions for people. Please stick to the forum guidelines.

 

Thanks.

[mudimbapascal]

Thanks @Cassie