ScrollTrigger on Frame Number

[Nemor]

Hello, Im very new to this plugin and also new to custom JS coding. im trying to create a apple like background animation for scroll. I managed to get the image sequence to play on scroll but have trouble showing the content on top of it. I have 3 texts i want to show during scroll.

 

I have 350 frames/images

Frame 50-100 : Text 1 

Frame 150-200 : Text 2 

Frame 250-300 : Text 3

 

I found waut to get this done with % of page height but that will not work as the screen size changes. Is there anyway to get this done? Atleast a sample would really help.

 

There is a wordpress plugin that does this Scrollsequence.com - Wordpress Plugin Documentation

[GreenSock]

Welcome, @Nemor!

 

Sure, that should be entirely doable but without seeing a minimal demo of your setup, we can't really offer much. We need to see a simple CodePen, CodeSandbox, or Stackblitz showing your basic setup. And please keep in mind that these forums are for GSAP-specific questions, not for general custom consulting services or "please show me how to build this effect" tutorials. Please read the forum guidelines. 

 

In theory, though, there are many ways you could do this. One would be to put your frame-based animation into a timeline and then put your text-based ones into that accordingly at the right timings using the position parameter. Or you could just snag the ScrollTrigger instance from your main frame-based animation and then use its start/end values inside function-based ones on the text animation ScrollTriggers. 

 

I hope that gets you going in the right direction. We do offer paid custom consulting services - if you'd like to explore that, just contact us. 

[Rodrigo]

Hi,

 

This example does something like that but with a video. The approach should be basically the same but using a set of images instead of a video behind the texts:

See the Pen QWrmdxP by GreenSock (@GreenSock) on CodePen

 

You can read more about it in this thread:

 

Hopefully this helps.

Happy Tweening!